<!DOCTYPE html>
<html lang="en-US">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>代码篇 | Mask的前端笔记</title>
    <meta name="generator" content="VuePress 1.8.0">
    <link rel="icon" href="/note_blob/favicon.ico">
    <meta name="description" content=" ">
    
    <link rel="preload" href="/note_blob/assets/css/0.styles.eb969508.css" as="style"><link rel="preload" href="/note_blob/assets/js/app.2eeab7c1.js" as="script"><link rel="preload" href="/note_blob/assets/js/2.0b68a382.js" as="script"><link rel="preload" href="/note_blob/assets/js/10.bc0c7728.js" as="script"><link rel="prefetch" href="/note_blob/assets/js/11.5743c401.js"><link rel="prefetch" href="/note_blob/assets/js/12.83b7c603.js"><link rel="prefetch" href="/note_blob/assets/js/3.1f4727a9.js"><link rel="prefetch" href="/note_blob/assets/js/4.158abeb5.js"><link rel="prefetch" href="/note_blob/assets/js/5.fd05ad8b.js"><link rel="prefetch" href="/note_blob/assets/js/6.91a76f73.js"><link rel="prefetch" href="/note_blob/assets/js/7.1ca97cb1.js"><link rel="prefetch" href="/note_blob/assets/js/8.3b303ca1.js"><link rel="prefetch" href="/note_blob/assets/js/9.9661832c.js">
    <link rel="stylesheet" href="/note_blob/assets/css/0.styles.eb969508.css">
  </head>
  <body>
    <div id="app" data-server-rendered="true"><div class="theme-container"><header class="navbar"><div class="sidebar-button"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" viewBox="0 0 448 512" class="icon"><path fill="currentColor" d="M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z"></path></svg></div> <a href="/note_blob/" class="home-link router-link-active"><!----> <span class="site-name">Mask的前端笔记</span></a> <div class="links"><div class="search-box"><input aria-label="Search" autocomplete="off" spellcheck="false" value=""> <!----></div> <nav class="nav-links can-hide"><div class="nav-item"><a href="/note_blob/" class="nav-link">
  主页
</a></div><div class="nav-item"><a href="/note_blob/docs/base.html" class="nav-link">
  基础篇
</a></div><div class="nav-item"><a href="/note_blob/docs/share.html" class="nav-link">
  分享篇
</a></div><div class="nav-item"><a href="/note_blob/docs/code.html" aria-current="page" class="nav-link router-link-exact-active router-link-active">
  代码篇
</a></div><div class="nav-item"><a href="/note_blob/docs/book.html" class="nav-link">
  推荐篇
</a></div><div class="nav-item"><a href="/note_blob/docs/css.html" class="nav-link">
  css篇
</a></div><div class="nav-item"><a href="https://github.com/jsmask" target="_blank" rel="noopener noreferrer" class="nav-link external">
  Github
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div> <!----></nav></div></header> <div class="sidebar-mask"></div> <aside class="sidebar"><nav class="nav-links"><div class="nav-item"><a href="/note_blob/" class="nav-link">
  主页
</a></div><div class="nav-item"><a href="/note_blob/docs/base.html" class="nav-link">
  基础篇
</a></div><div class="nav-item"><a href="/note_blob/docs/share.html" class="nav-link">
  分享篇
</a></div><div class="nav-item"><a href="/note_blob/docs/code.html" aria-current="page" class="nav-link router-link-exact-active router-link-active">
  代码篇
</a></div><div class="nav-item"><a href="/note_blob/docs/book.html" class="nav-link">
  推荐篇
</a></div><div class="nav-item"><a href="/note_blob/docs/css.html" class="nav-link">
  css篇
</a></div><div class="nav-item"><a href="https://github.com/jsmask" target="_blank" rel="noopener noreferrer" class="nav-link external">
  Github
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div> <!----></nav>  <ul class="sidebar-links"><li><section class="sidebar-group depth-0"><p class="sidebar-heading open"><span>代码篇</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/note_blob/docs/code.html#express中路由简易使用" class="sidebar-link">express中路由简易使用</a><ul class="sidebar-sub-headers"></ul></li><li><a href="/note_blob/docs/code.html#mongoose简易使用-演示" class="sidebar-link">mongoose简易使用&amp;演示</a><ul class="sidebar-sub-headers"></ul></li><li><a href="/note_blob/docs/code.html#webpack-基础配置" class="sidebar-link">webpack 基础配置</a><ul class="sidebar-sub-headers"></ul></li><li><a href="/note_blob/docs/code.html#webpack-vue配置" class="sidebar-link">webpack vue配置</a><ul class="sidebar-sub-headers"></ul></li><li><a href="/note_blob/docs/code.html#webpack多文件打包" class="sidebar-link">webpack多文件打包</a><ul class="sidebar-sub-headers"></ul></li><li><a href="/note_blob/docs/code.html#redux基本使用" class="sidebar-link">Redux基本使用</a><ul class="sidebar-sub-headers"></ul></li><li><a href="/note_blob/docs/code.html#vuex基本使用" class="sidebar-link">Vuex基本使用</a><ul class="sidebar-sub-headers"></ul></li><li><a href="/note_blob/docs/code.html#vue-config-js配置" class="sidebar-link">vue.config.js配置</a><ul class="sidebar-sub-headers"></ul></li><li><a href="/note_blob/docs/code.html#next-config-js配置" class="sidebar-link">next.config.js配置</a><ul class="sidebar-sub-headers"></ul></li><li><a href="/note_blob/docs/code.html#vue事件总线" class="sidebar-link">Vue事件总线</a><ul class="sidebar-sub-headers"></ul></li><li><a href="/note_blob/docs/code.html#vue插件封装" class="sidebar-link">Vue插件封装</a><ul class="sidebar-sub-headers"></ul></li><li><a href="/note_blob/docs/code.html#网络模块封装" class="sidebar-link">网络模块封装</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/note_blob/docs/code.html#案例-uni-app" class="sidebar-link">案例:uni-app</a></li><li class="sidebar-sub-header"><a href="/note_blob/docs/code.html#案例-element-ui-axios" class="sidebar-link">案例:element-ui+axios</a></li></ul></li><li><a href="/note_blob/docs/code.html#fastclick的使用" class="sidebar-link">FastClick的使用</a><ul class="sidebar-sub-headers"></ul></li><li><a href="/note_blob/docs/code.html#rem转换" class="sidebar-link">rem转换</a><ul class="sidebar-sub-headers"></ul></li><li><a href="/note_blob/docs/code.html#防抖-节流" class="sidebar-link">防抖&amp;节流</a><ul class="sidebar-sub-headers"></ul></li><li><a href="/note_blob/docs/code.html#浅拷贝" class="sidebar-link">浅拷贝</a><ul class="sidebar-sub-headers"></ul></li><li><a href="/note_blob/docs/code.html#深度拷贝" class="sidebar-link">深度拷贝</a><ul class="sidebar-sub-headers"></ul></li><li><a href="/note_blob/docs/code.html#对象是否为空" class="sidebar-link">对象是否为空</a><ul class="sidebar-sub-headers"></ul></li><li><a href="/note_blob/docs/code.html#获取浏览器信息" class="sidebar-link">获取浏览器信息</a><ul class="sidebar-sub-headers"></ul></li><li><a href="/note_blob/docs/code.html#禁止键盘某些事件" class="sidebar-link">禁止键盘某些事件</a><ul class="sidebar-sub-headers"></ul></li><li><a href="/note_blob/docs/code.html#禁止右键、选择、复制" class="sidebar-link">禁止右键、选择、复制</a><ul class="sidebar-sub-headers"></ul></li><li><a href="/note_blob/docs/code.html#性能分析" class="sidebar-link">性能分析</a><ul class="sidebar-sub-headers"></ul></li><li><a href="/note_blob/docs/code.html#是否为pc浏览器" class="sidebar-link">是否为PC浏览器</a><ul class="sidebar-sub-headers"></ul></li><li><a href="/note_blob/docs/code.html#时间格式化" class="sidebar-link">时间格式化</a><ul class="sidebar-sub-headers"></ul></li><li><a href="/note_blob/docs/code.html#获取url参数" class="sidebar-link">获取URL参数</a><ul class="sidebar-sub-headers"></ul></li><li><a href="/note_blob/docs/code.html#随机数获取" class="sidebar-link">随机数获取</a><ul class="sidebar-sub-headers"></ul></li><li><a href="/note_blob/docs/code.html#上传图片" class="sidebar-link">上传图片</a><ul class="sidebar-sub-headers"></ul></li><li><a href="/note_blob/docs/code.html#判断小数是否相等" class="sidebar-link">判断小数是否相等</a><ul class="sidebar-sub-headers"></ul></li><li><a href="/note_blob/docs/code.html#精确小数" class="sidebar-link">精确小数</a><ul class="sidebar-sub-headers"></ul></li><li><a href="/note_blob/docs/code.html#requestanimframe-兼容" class="sidebar-link">requestAnimFrame 兼容</a><ul class="sidebar-sub-headers"></ul></li><li><a href="/note_blob/docs/code.html#动态创建script标签" class="sidebar-link">动态创建script标签</a><ul class="sidebar-sub-headers"></ul></li><li><a href="/note_blob/docs/code.html#debugger反调试" class="sidebar-link">debugger反调试</a><ul class="sidebar-sub-headers"></ul></li><li><a href="/note_blob/docs/code.html#base64转blob" class="sidebar-link">Base64转Blob</a><ul class="sidebar-sub-headers"></ul></li><li><a href="/note_blob/docs/code.html#复制文本" class="sidebar-link">复制文本</a><ul class="sidebar-sub-headers"></ul></li><li><a href="/note_blob/docs/code.html#转换数字单位k与w" class="sidebar-link">转换数字单位k与w</a><ul class="sidebar-sub-headers"></ul></li><li><a href="/note_blob/docs/code.html#获取地址某参数的值" class="sidebar-link">获取地址某参数的值</a><ul class="sidebar-sub-headers"></ul></li><li><a href="/note_blob/docs/code.html#匹配简体字" class="sidebar-link">匹配简体字</a><ul class="sidebar-sub-headers"></ul></li><li><a href="/note_blob/docs/code.html#数组打乱顺序" class="sidebar-link">数组打乱顺序</a><ul class="sidebar-sub-headers"></ul></li></ul></section></li></ul> </aside> <main class="page"> <div class="theme-default-content content__default"><h1 id="代码篇"><a href="#代码篇" class="header-anchor">#</a> 代码篇</h1> <h2 id="express中路由简易使用"><a href="#express中路由简易使用" class="header-anchor">#</a> express中路由简易使用</h2> <div class="language-javascript extra-class"><pre class="language-javascript"><code><span class="token keyword">const</span> express <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">&quot;express&quot;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token keyword">const</span> router <span class="token operator">=</span> express<span class="token punctuation">.</span><span class="token function">Router</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
router<span class="token punctuation">.</span><span class="token function">get</span><span class="token punctuation">(</span><span class="token string">&quot;/test&quot;</span><span class="token punctuation">,</span> <span class="token punctuation">(</span><span class="token parameter">req<span class="token punctuation">,</span> res</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
    res<span class="token punctuation">.</span><span class="token function">json</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
        name<span class="token operator">:</span> <span class="token string">&quot;mask&quot;</span>
    <span class="token punctuation">}</span><span class="token punctuation">)</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre></div><hr> <h2 id="mongoose简易使用-演示"><a href="#mongoose简易使用-演示" class="header-anchor">#</a> mongoose简易使用&amp;演示</h2> <ol><li>连接数据库</li></ol> <div class="language-javascript extra-class"><pre class="language-javascript"><code><span class="token keyword">const</span> mogoose <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">&quot;mongoose&quot;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token keyword">const</span> db <span class="token operator">=</span> <span class="token string">&quot;&quot;</span><span class="token punctuation">;</span> <span class="token comment">//[mongo URL]:string</span>
mogoose<span class="token punctuation">.</span><span class="token function">connect</span><span class="token punctuation">(</span>db<span class="token punctuation">)</span>
    <span class="token punctuation">.</span><span class="token function">then</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
        console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'-&gt;数据库-&gt;连接成功'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span><span class="token punctuation">)</span>
    <span class="token punctuation">.</span><span class="token function">catch</span><span class="token punctuation">(</span><span class="token parameter">err</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
        console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'-&gt;数据库-&gt;连接失败 err:'</span> <span class="token operator">+</span> err<span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span><span class="token punctuation">)</span>
</code></pre></div><ol start="2"><li>创建数据模型演示</li></ol> <div class="language-javascript extra-class"><pre class="language-javascript"><code><span class="token keyword">const</span> mongoose <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">&quot;mongoose&quot;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token keyword">const</span> Schema <span class="token operator">=</span> mongoose<span class="token punctuation">.</span>Schema<span class="token punctuation">;</span>

<span class="token keyword">const</span> userSchema <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Schema</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
    username<span class="token operator">:</span> <span class="token punctuation">{</span>
        type<span class="token operator">:</span> String<span class="token punctuation">,</span>
        required<span class="token operator">:</span> <span class="token boolean">true</span>
    <span class="token punctuation">}</span><span class="token punctuation">,</span>
    password<span class="token operator">:</span> <span class="token punctuation">{</span>
        type<span class="token operator">:</span> String<span class="token punctuation">,</span>
        required<span class="token operator">:</span> <span class="token boolean">true</span>
    <span class="token punctuation">}</span><span class="token punctuation">,</span>
    avatar<span class="token operator">:</span> <span class="token punctuation">{</span>
        type<span class="token operator">:</span> String
    <span class="token punctuation">}</span><span class="token punctuation">,</span>
    sex<span class="token operator">:</span> <span class="token punctuation">{</span>
        type<span class="token operator">:</span> Number<span class="token punctuation">,</span>
        <span class="token keyword">default</span><span class="token operator">:</span> <span class="token number">0</span>
    <span class="token punctuation">}</span><span class="token punctuation">,</span>
    date<span class="token operator">:</span> <span class="token punctuation">{</span>
        type<span class="token operator">:</span> Date<span class="token punctuation">,</span>
        <span class="token keyword">default</span><span class="token operator">:</span> Date<span class="token punctuation">.</span>now<span class="token punctuation">,</span>
        required<span class="token operator">:</span> <span class="token boolean">true</span>
    <span class="token punctuation">}</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
module<span class="token punctuation">.</span>exports <span class="token operator">=</span> User <span class="token operator">=</span> mongoose<span class="token punctuation">.</span><span class="token function">model</span><span class="token punctuation">(</span><span class="token string">&quot;users&quot;</span><span class="token punctuation">,</span> userSchema<span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre></div><ol start="3"><li>查询与插入演示</li></ol> <div class="language-javascript extra-class"><pre class="language-javascript"><code><span class="token keyword">const</span> express <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">&quot;express&quot;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token keyword">const</span> bcrypt <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">&quot;bcrypt&quot;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token keyword">const</span> router <span class="token operator">=</span> express<span class="token punctuation">.</span><span class="token function">Router</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token keyword">const</span> User <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">&quot;../../models/User&quot;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

<span class="token comment">// @route POST api/users/register</span>
<span class="token comment">// @desc 请求注册</span>
<span class="token comment">// @assess public</span>
router<span class="token punctuation">.</span><span class="token function">post</span><span class="token punctuation">(</span><span class="token string">&quot;/register&quot;</span><span class="token punctuation">,</span> <span class="token punctuation">(</span><span class="token parameter">req<span class="token punctuation">,</span> res</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
    <span class="token keyword">const</span> password <span class="token operator">=</span> req<span class="token punctuation">.</span>body<span class="token punctuation">.</span>password<span class="token punctuation">;</span>
    <span class="token keyword">const</span> username <span class="token operator">=</span> req<span class="token punctuation">.</span>body<span class="token punctuation">.</span>username<span class="token punctuation">;</span>
    <span class="token comment">//查询数据</span>
    User<span class="token punctuation">.</span><span class="token function">findOne</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
        username
    <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">then</span><span class="token punctuation">(</span><span class="token parameter">user</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
        <span class="token keyword">if</span> <span class="token punctuation">(</span>user<span class="token punctuation">)</span> <span class="token punctuation">{</span>
            <span class="token keyword">return</span> res<span class="token punctuation">.</span><span class="token function">json</span><span class="token punctuation">(</span><span class="token punctuation">{</span>status<span class="token operator">:</span><span class="token number">0</span><span class="token punctuation">,</span>msg<span class="token operator">:</span><span class="token string">&quot;该昵称已被使用&quot;</span><span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
        <span class="token punctuation">}</span> <span class="token keyword">else</span> <span class="token punctuation">{</span>
            <span class="token keyword">const</span> newUser <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">User</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
                username<span class="token punctuation">,</span>
                password
            <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
            <span class="token comment">//利用bcrypt执行加密操作</span>
            bcrypt<span class="token punctuation">.</span><span class="token function">genSalt</span><span class="token punctuation">(</span><span class="token number">10</span><span class="token punctuation">,</span> <span class="token punctuation">(</span><span class="token parameter">err<span class="token punctuation">,</span> salt</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
                bcrypt<span class="token punctuation">.</span><span class="token function">hash</span><span class="token punctuation">(</span>newUser<span class="token punctuation">.</span>password<span class="token punctuation">,</span> salt<span class="token punctuation">,</span> <span class="token punctuation">(</span><span class="token parameter">err<span class="token punctuation">,</span> hash</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
                    <span class="token keyword">if</span> <span class="token punctuation">(</span>err<span class="token punctuation">)</span> <span class="token keyword">throw</span> err<span class="token punctuation">;</span>
                    newUser<span class="token punctuation">.</span>password <span class="token operator">=</span> hash<span class="token punctuation">;</span>
                    <span class="token comment">//插入数据</span>
                    newUser<span class="token punctuation">.</span><span class="token function">save</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
                        <span class="token punctuation">.</span><span class="token function">then</span><span class="token punctuation">(</span><span class="token parameter">user</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
                            res<span class="token punctuation">.</span><span class="token function">json</span><span class="token punctuation">(</span><span class="token punctuation">{</span>status<span class="token operator">:</span><span class="token number">1</span><span class="token punctuation">,</span>msg<span class="token operator">:</span><span class="token string">&quot;注册成功&quot;</span><span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
                        <span class="token punctuation">}</span><span class="token punctuation">)</span>
                        <span class="token punctuation">.</span><span class="token function">catch</span><span class="token punctuation">(</span><span class="token parameter">err</span> <span class="token operator">=&gt;</span> console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>err<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
                <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
            <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
        <span class="token punctuation">}</span>
    <span class="token punctuation">}</span><span class="token punctuation">)</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre></div><hr> <h2 id="webpack-基础配置"><a href="#webpack-基础配置" class="header-anchor">#</a> webpack 基础配置</h2> <div class="language-javascript extra-class"><pre class="language-javascript"><code><span class="token keyword">const</span> path <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">&quot;path&quot;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

<span class="token keyword">const</span> HtmlWebpackPlugin <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">&quot;html-webpack-plugin&quot;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token keyword">const</span> <span class="token punctuation">{</span> CleanWebpackPlugin <span class="token punctuation">}</span> <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">'clean-webpack-plugin'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token keyword">const</span> MiniCssExtractPlugin <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">&quot;mini-css-extract-plugin&quot;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token keyword">const</span> webpack <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">&quot;webpack&quot;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token keyword">const</span> <span class="token punctuation">{</span> HotModuleReplacementPlugin <span class="token punctuation">}</span> <span class="token operator">=</span> webpack<span class="token punctuation">;</span>

<span class="token keyword">const</span> devMode <span class="token operator">=</span> process<span class="token punctuation">.</span>env<span class="token punctuation">.</span><span class="token constant">NODE_ENV</span> <span class="token operator">!==</span> <span class="token string">'production'</span><span class="token punctuation">;</span>

module<span class="token punctuation">.</span>exports <span class="token operator">=</span> <span class="token punctuation">{</span>
  <span class="token comment">// mode:&quot;production&quot;,</span>
  <span class="token comment">// mode:&quot;development&quot;,</span>
  entry<span class="token operator">:</span> <span class="token punctuation">{</span>
    index<span class="token operator">:</span> <span class="token string">&quot;./src/index.js&quot;</span><span class="token punctuation">,</span>
    <span class="token comment">// another: &quot;@babel/polyfill&quot;</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
  output<span class="token operator">:</span> <span class="token punctuation">{</span>
    path<span class="token operator">:</span> path<span class="token punctuation">.</span><span class="token function">resolve</span><span class="token punctuation">(</span>__dirname<span class="token punctuation">,</span> <span class="token string">'./build'</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
    filename<span class="token operator">:</span> <span class="token string">&quot;main.js&quot;</span><span class="token punctuation">,</span>
    <span class="token comment">// publicPath: ''</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
  devServer<span class="token operator">:</span> <span class="token punctuation">{</span>
    contentBase<span class="token operator">:</span> <span class="token string">&quot;./build&quot;</span><span class="token punctuation">,</span>
    open<span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>
    hot<span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>
    hotOnly<span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>
    port<span class="token operator">:</span> <span class="token number">8081</span><span class="token punctuation">,</span>
    proxy<span class="token operator">:</span> <span class="token punctuation">{</span>
      <span class="token string">&quot;/api&quot;</span><span class="token operator">:</span> <span class="token punctuation">{</span>
        target<span class="token operator">:</span> <span class="token string">&quot;&quot;</span>
      <span class="token punctuation">}</span>
    <span class="token punctuation">}</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
  <span class="token comment">// devtool:&quot;cheap-module-eval-source-map&quot;,// 开发环境配置</span>
  <span class="token comment">// devtool:&quot;cheap-module-source-map&quot;,   // 线上生成配置</span>
  <span class="token comment">// devtool: devMode ? &quot;source-map&quot; : &quot;none&quot;,</span>
  <span class="token comment">// devtool:&quot;eval&quot;,</span>
  devtool<span class="token operator">:</span> devMode <span class="token operator">?</span> <span class="token string">&quot;cheap-module-eval-source-map&quot;</span> <span class="token operator">:</span> <span class="token string">&quot;none&quot;</span><span class="token punctuation">,</span>
  module<span class="token operator">:</span> <span class="token punctuation">{</span>
    rules<span class="token operator">:</span> <span class="token punctuation">[</span>
      <span class="token punctuation">{</span>
        test<span class="token operator">:</span> <span class="token regex"><span class="token regex-delimiter">/</span><span class="token regex-source language-regex">\.jsx?$</span><span class="token regex-delimiter">/</span></span><span class="token punctuation">,</span>
        exclude<span class="token operator">:</span> <span class="token regex"><span class="token regex-delimiter">/</span><span class="token regex-source language-regex">(node_modules|bower_components)</span><span class="token regex-delimiter">/</span></span><span class="token punctuation">,</span>
        use<span class="token operator">:</span> <span class="token punctuation">{</span>
          loader<span class="token operator">:</span> <span class="token string">'babel-loader'</span><span class="token punctuation">,</span>
          options<span class="token operator">:</span> <span class="token punctuation">{</span>
            presets<span class="token operator">:</span> <span class="token punctuation">[</span><span class="token punctuation">[</span>
              <span class="token string">'@babel/preset-env'</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>
                targets<span class="token operator">:</span> <span class="token punctuation">{</span>
                  chrome<span class="token operator">:</span> <span class="token number">53</span><span class="token punctuation">,</span>
                  browsers<span class="token operator">:</span> <span class="token punctuation">[</span>
                    <span class="token string">&quot;last 2 versions&quot;</span><span class="token punctuation">,</span>
                    <span class="token string">&quot;safari 7&quot;</span><span class="token punctuation">,</span>
                    <span class="token string">&quot;android &gt;= 4.0&quot;</span><span class="token punctuation">,</span>
                    <span class="token string">&quot;not ie &lt;= 8&quot;</span>
                  <span class="token punctuation">]</span>
                <span class="token punctuation">}</span><span class="token punctuation">,</span>
                useBuiltIns<span class="token operator">:</span> <span class="token string">&quot;usage&quot;</span><span class="token punctuation">,</span>
                corejs<span class="token operator">:</span> <span class="token number">2</span>
              <span class="token punctuation">}</span>
            <span class="token punctuation">]</span><span class="token punctuation">]</span>
          <span class="token punctuation">}</span>
        <span class="token punctuation">}</span>
      <span class="token punctuation">}</span><span class="token punctuation">,</span>
      <span class="token punctuation">{</span>
        test<span class="token operator">:</span> <span class="token regex"><span class="token regex-delimiter">/</span><span class="token regex-source language-regex">\.(jpe?g|png|gif|svg)$</span><span class="token regex-delimiter">/</span></span><span class="token punctuation">,</span>
        use<span class="token operator">:</span> <span class="token punctuation">{</span>
          loader<span class="token operator">:</span> <span class="token string">&quot;url-loader&quot;</span><span class="token punctuation">,</span>
          options<span class="token operator">:</span> <span class="token punctuation">{</span>
            limit<span class="token operator">:</span> <span class="token number">8192</span><span class="token punctuation">,</span>
            name<span class="token operator">:</span> <span class="token string">&quot;[name].[hash:8].[ext]&quot;</span><span class="token punctuation">,</span>
            outputPath<span class="token operator">:</span> <span class="token string">&quot;images/&quot;</span>
          <span class="token punctuation">}</span>
        <span class="token punctuation">}</span>
      <span class="token punctuation">}</span><span class="token punctuation">,</span>
      <span class="token punctuation">{</span>
        test<span class="token operator">:</span> <span class="token regex"><span class="token regex-delimiter">/</span><span class="token regex-source language-regex">\.css$</span><span class="token regex-delimiter">/</span></span><span class="token punctuation">,</span>
        use<span class="token operator">:</span> <span class="token punctuation">[</span>
          devMode <span class="token operator">?</span> <span class="token string">&quot;style-loader&quot;</span> <span class="token operator">:</span> <span class="token punctuation">{</span>
            loader<span class="token operator">:</span> MiniCssExtractPlugin<span class="token punctuation">.</span>loader<span class="token punctuation">,</span>
            <span class="token comment">// options: {</span>
            <span class="token comment">//    hmr: false,</span>
            <span class="token comment">//    publicPath: '../../'</span>
            <span class="token comment">// }</span>
          <span class="token punctuation">}</span><span class="token punctuation">,</span>
          <span class="token string">&quot;css-loader&quot;</span><span class="token punctuation">,</span>
          <span class="token punctuation">{</span>
            loader<span class="token operator">:</span> <span class="token string">&quot;postcss-loader&quot;</span><span class="token punctuation">,</span>
            options<span class="token operator">:</span> <span class="token punctuation">{</span>
              plugins<span class="token operator">:</span> <span class="token punctuation">[</span>
                <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">'autoprefixer'</span><span class="token punctuation">)</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
                  <span class="token string">&quot;overrideBrowserslist&quot;</span><span class="token operator">:</span> <span class="token punctuation">[</span>
                    <span class="token string">&quot;&gt; 1%&quot;</span><span class="token punctuation">,</span>
                    <span class="token string">&quot;last 7 versions&quot;</span><span class="token punctuation">,</span>
                    <span class="token string">&quot;not ie &lt;= 8&quot;</span><span class="token punctuation">,</span>
                    <span class="token string">&quot;ios &gt;= 8&quot;</span><span class="token punctuation">,</span>
                    <span class="token string">&quot;android &gt;= 4.0&quot;</span>
                  <span class="token punctuation">]</span>
                <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
                <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">'postcss-pxtorem'</span><span class="token punctuation">)</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
                  rootValue<span class="token operator">:</span> <span class="token number">100</span><span class="token punctuation">,</span>
                  propWhiteList<span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">&quot;*&quot;</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
                  selectorBlackList<span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">&quot;.vux-&quot;</span><span class="token punctuation">,</span> <span class="token string">&quot;.weui-&quot;</span><span class="token punctuation">,</span> <span class="token string">&quot;.mt-&quot;</span><span class="token punctuation">,</span> <span class="token string">&quot;.mint-&quot;</span><span class="token punctuation">,</span> <span class="token string">&quot;.dp-&quot;</span><span class="token punctuation">,</span> <span class="token string">&quot;.ig-&quot;</span><span class="token punctuation">]</span>
                <span class="token punctuation">}</span><span class="token punctuation">)</span>
              <span class="token punctuation">]</span>
            <span class="token punctuation">}</span>
          <span class="token punctuation">}</span><span class="token punctuation">]</span>
      <span class="token punctuation">}</span>
    <span class="token punctuation">]</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
  plugins<span class="token operator">:</span> <span class="token punctuation">[</span>
    <span class="token keyword">new</span> <span class="token class-name">CleanWebpackPlugin</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
    <span class="token keyword">new</span> <span class="token class-name">HtmlWebpackPlugin</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
      title<span class="token operator">:</span> <span class="token string">&quot;DEMO&quot;</span><span class="token punctuation">,</span>
      filename<span class="token operator">:</span> <span class="token string">&quot;index.html&quot;</span><span class="token punctuation">,</span>
      template<span class="token operator">:</span> <span class="token string">&quot;./public/index.html&quot;</span>
    <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
    <span class="token keyword">new</span> <span class="token class-name">MiniCssExtractPlugin</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
      filename<span class="token operator">:</span> <span class="token string">&quot;style.[hash:8].css&quot;</span>
    <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
    <span class="token keyword">new</span> <span class="token class-name">HotModuleReplacementPlugin</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
  <span class="token punctuation">]</span><span class="token punctuation">,</span>
  optimization<span class="token operator">:</span> <span class="token punctuation">{</span>
    <span class="token comment">//在package:json 需配置 &quot;sideEffects&quot;: false</span>
    usedExports<span class="token operator">:</span> <span class="token boolean">true</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span>

</code></pre></div><hr> <h2 id="webpack-vue配置"><a href="#webpack-vue配置" class="header-anchor">#</a> webpack vue配置</h2> <ol><li>创建webpack.config.js文件</li> <li>babel安装 -&gt; npm install --save-dev babel-loader@7 babel-core babel-preset-es2015</li> <li>解析vue文件安装 -&gt;  npm install vue-loader vue-template-compiler --save-dev</li></ol> <div class="language-javascript extra-class"><pre class="language-javascript"><code><span class="token keyword">const</span> path<span class="token operator">=</span><span class="token function">require</span><span class="token punctuation">(</span><span class="token string">'path'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token keyword">const</span> VueLoaderPlugin <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">'vue-loader/lib/plugin'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
module<span class="token punctuation">.</span>exports<span class="token operator">=</span><span class="token punctuation">{</span>
 <span class="token comment">//入口：可以是字符串/数组/对象</span>
 entry<span class="token operator">:</span><span class="token string">'./src/main.js'</span><span class="token punctuation">,</span>
 <span class="token comment">//入口：通常是一个对象，至少保证有path和filename两个属性</span>
 output<span class="token operator">:</span><span class="token punctuation">{</span>
   path<span class="token operator">:</span>path<span class="token punctuation">.</span><span class="token function">resolve</span><span class="token punctuation">(</span>__dirname<span class="token punctuation">,</span><span class="token string">'dist'</span><span class="token punctuation">)</span><span class="token punctuation">,</span> <span class="token comment">//绝对路径</span>
   filename<span class="token operator">:</span><span class="token string">'bundle.js'</span><span class="token punctuation">,</span>
   <span class="token comment">//publicPath:'dist/'</span>
 <span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token comment">//模块</span>
 module<span class="token operator">:</span><span class="token punctuation">{</span>
   rules<span class="token operator">:</span><span class="token punctuation">[</span>
     <span class="token punctuation">{</span>
      test<span class="token operator">:</span> <span class="token regex"><span class="token regex-delimiter">/</span><span class="token regex-source language-regex">\.js$</span><span class="token regex-delimiter">/</span></span><span class="token punctuation">,</span>
<span class="token comment">//排除一些应用模块</span>
      exclude<span class="token operator">:</span> <span class="token regex"><span class="token regex-delimiter">/</span><span class="token regex-source language-regex">(node_modules|bower_components)</span><span class="token regex-delimiter">/</span></span><span class="token punctuation">,</span>
      use<span class="token operator">:</span> <span class="token punctuation">{</span>
        loader<span class="token operator">:</span> <span class="token string">'babel-loader'</span><span class="token punctuation">,</span>
        options<span class="token operator">:</span> <span class="token punctuation">{</span>
          <span class="token comment">//babel&lt;7用es2015，babel&gt;=7使用@babel/preset-env</span>
          presets<span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">'es2015'</span><span class="token punctuation">]</span>  
        <span class="token punctuation">}</span>
      <span class="token punctuation">}</span>
    <span class="token punctuation">}</span><span class="token punctuation">,</span>
    <span class="token punctuation">{</span>
       test<span class="token operator">:</span><span class="token regex"><span class="token regex-delimiter">/</span><span class="token regex-source language-regex">\.css$</span><span class="token regex-delimiter">/</span></span><span class="token punctuation">,</span>
<span class="token comment">//css-loader只负责将css文件加载</span>
<span class="token comment">//style-loader负责将样式添加到DOM中</span>
<span class="token comment">//使用多个loader时，是从后往前执行</span>
       use<span class="token operator">:</span><span class="token punctuation">[</span><span class="token string">'style-loader'</span><span class="token punctuation">,</span><span class="token string">'css-loader'</span><span class="token punctuation">]</span>
    <span class="token punctuation">}</span><span class="token punctuation">,</span>
    <span class="token punctuation">{</span>
        test<span class="token operator">:</span><span class="token regex"><span class="token regex-delimiter">/</span><span class="token regex-source language-regex">\.(png|gif|jpe?g)$</span><span class="token regex-delimiter">/</span></span><span class="token punctuation">,</span>
        use<span class="token operator">:</span><span class="token punctuation">{</span>
            loader<span class="token operator">:</span><span class="token string">'url-loader'</span><span class="token punctuation">,</span>
            options<span class="token operator">:</span><span class="token punctuation">{</span>
<span class="token comment">//当加载的图片小于limit时，会将图片编译成base64字符串形式</span>
<span class="token comment">//当加载的图片大于limit时，需要使用file-loader模块进行加载</span>
                 limit<span class="token operator">:</span><span class="token number">8192</span><span class="token punctuation">,</span>
                 name<span class="token operator">:</span><span class="token string">'img/[name].[hash:8].[ext]'</span>
             <span class="token punctuation">}</span>
         <span class="token punctuation">}</span>
    <span class="token punctuation">}</span><span class="token punctuation">,</span>
   <span class="token punctuation">{</span>
            test<span class="token operator">:</span> <span class="token regex"><span class="token regex-delimiter">/</span><span class="token regex-source language-regex">\.vue$</span><span class="token regex-delimiter">/</span></span><span class="token punctuation">,</span>
            loader<span class="token operator">:</span> <span class="token string">'vue-loader'</span><span class="token punctuation">,</span>
            options<span class="token operator">:</span> <span class="token punctuation">{</span>
              extractCSS<span class="token operator">:</span> <span class="token boolean">true</span>
            <span class="token punctuation">}</span>
          <span class="token punctuation">}</span>
   <span class="token punctuation">]</span>
 <span class="token punctuation">}</span><span class="token punctuation">,</span>
    resolve<span class="token operator">:</span> <span class="token punctuation">{</span>
        alias<span class="token operator">:</span> <span class="token punctuation">{</span>
<span class="token comment">//配置vue运行解析模式</span>
            <span class="token string">&quot;vue$&quot;</span><span class="token operator">:</span> <span class="token string">&quot;vue/dist/vue.esm.js&quot;</span>
        <span class="token punctuation">}</span>
    <span class="token punctuation">}</span><span class="token punctuation">,</span>
    plugins<span class="token operator">:</span> <span class="token punctuation">[</span>
        <span class="token keyword">new</span> <span class="token class-name">VueLoaderPlugin</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
    <span class="token punctuation">]</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span>
</code></pre></div><hr> <h2 id="webpack多文件打包"><a href="#webpack多文件打包" class="header-anchor">#</a> webpack多文件打包</h2> <div class="language-javascript extra-class"><pre class="language-javascript"><code><span class="token keyword">const</span> filenames <span class="token operator">=</span> fs<span class="token punctuation">.</span><span class="token function">readdirSync</span><span class="token punctuation">(</span><span class="token string">'./src'</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">filter</span><span class="token punctuation">(</span><span class="token parameter">item</span> <span class="token operator">=&gt;</span> <span class="token regex"><span class="token regex-delimiter">/</span><span class="token regex-source language-regex">\.html$</span><span class="token regex-delimiter">/</span><span class="token regex-flags">ig</span></span><span class="token punctuation">.</span><span class="token function">test</span><span class="token punctuation">(</span>item<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">map</span><span class="token punctuation">(</span><span class="token parameter">item</span> <span class="token operator">=&gt;</span> item<span class="token punctuation">.</span><span class="token function">replace</span><span class="token punctuation">(</span><span class="token regex"><span class="token regex-delimiter">/</span><span class="token regex-source language-regex">\.html$</span><span class="token regex-delimiter">/</span><span class="token regex-flags">ig</span></span><span class="token punctuation">,</span> <span class="token string">''</span><span class="token punctuation">)</span><span class="token punctuation">)</span>
<span class="token keyword">const</span> obj <span class="token operator">=</span> <span class="token punctuation">{</span><span class="token punctuation">}</span>
filenames<span class="token punctuation">.</span><span class="token function">map</span><span class="token punctuation">(</span><span class="token parameter">item</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
    obj<span class="token punctuation">[</span>item<span class="token punctuation">]</span> <span class="token operator">=</span> <span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">./src/js/</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>item<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string">.js</span><span class="token template-punctuation string">`</span></span>
<span class="token punctuation">}</span><span class="token punctuation">)</span>

<span class="token comment">// ...</span>

module<span class="token punctuation">.</span>exports <span class="token operator">=</span> <span class="token punctuation">{</span>
    <span class="token regex"><span class="token regex-delimiter">/</span><span class="token regex-source language-regex">...</span><span class="token regex-delimiter">/</span></span>
    entry<span class="token operator">:</span> <span class="token punctuation">{</span>
        rem<span class="token operator">:</span> <span class="token string">'./src/js/rem.js'</span><span class="token punctuation">,</span>
        common<span class="token operator">:</span> <span class="token string">'./src/js/common.js'</span><span class="token punctuation">,</span>
        <span class="token operator">...</span>obj<span class="token punctuation">,</span>
    <span class="token punctuation">}</span><span class="token punctuation">,</span>
    <span class="token regex"><span class="token regex-delimiter">/</span><span class="token regex-source language-regex">...</span><span class="token regex-delimiter">/</span></span>
    plugins<span class="token operator">:</span> <span class="token punctuation">[</span>
        <span class="token operator">...</span>filenames<span class="token punctuation">.</span><span class="token function">map</span><span class="token punctuation">(</span><span class="token parameter">item</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
            <span class="token keyword">return</span> <span class="token keyword">new</span> <span class="token class-name">HtmlWebpackPlugin</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
                template<span class="token operator">:</span> <span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">./src/</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>item<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string">.html</span><span class="token template-punctuation string">`</span></span><span class="token punctuation">,</span>
                filename<span class="token operator">:</span> <span class="token template-string"><span class="token template-punctuation string">`</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>item<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string">.html</span><span class="token template-punctuation string">`</span></span><span class="token punctuation">,</span>
                chunks<span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">'rem'</span><span class="token punctuation">,</span> <span class="token string">'common'</span><span class="token punctuation">,</span> item<span class="token punctuation">]</span>
            <span class="token punctuation">}</span><span class="token punctuation">)</span>
        <span class="token punctuation">}</span><span class="token punctuation">)</span>
    <span class="token punctuation">]</span>
<span class="token punctuation">}</span>
</code></pre></div><ul><li><p>完整版案例</p> <div class="language-javascript extra-class"><pre class="language-javascript"><code><span class="token keyword">const</span> path <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">'path'</span><span class="token punctuation">)</span>
<span class="token keyword">const</span> fs <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">'fs'</span><span class="token punctuation">)</span>
<span class="token keyword">const</span> webpack <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">'webpack'</span><span class="token punctuation">)</span>

<span class="token keyword">const</span> HtmlWebpackPlugin <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">'html-webpack-plugin'</span><span class="token punctuation">)</span>
<span class="token comment">// 显示进程的完成进度</span>
<span class="token keyword">const</span> ProgressBarPlugin <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">'progress-bar-webpack-plugin'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token comment">// 设置进度字体颜色</span>
<span class="token keyword">const</span> chalk <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">'chalk'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token comment">// 清空dist文件夹</span>
<span class="token keyword">const</span> <span class="token punctuation">{</span> CleanWebpackPlugin <span class="token punctuation">}</span> <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">'clean-webpack-plugin'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

<span class="token keyword">const</span> MiniCssExtractPlugin <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">'mini-css-extract-plugin'</span><span class="token punctuation">)</span>


<span class="token keyword">const</span> TerserJSPlugin <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">'terser-webpack-plugin'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token keyword">const</span> OptimizeCSSAssetsPlugin <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">'optimize-css-assets-webpack-plugin'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token keyword">const</span> UglifyJsPlugin <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">'uglifyjs-webpack-plugin'</span><span class="token punctuation">)</span>
<span class="token keyword">const</span> CopyPlugin <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">'copy-webpack-plugin'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>


<span class="token keyword">const</span> isProduction <span class="token operator">=</span> process<span class="token punctuation">.</span>env<span class="token punctuation">.</span>npm_lifecycle_event <span class="token operator">!==</span> <span class="token string">'dev'</span>
<span class="token keyword">const</span> plugins <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token punctuation">]</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>process<span class="token punctuation">.</span>env<span class="token punctuation">.</span>npm_lifecycle_event<span class="token punctuation">)</span>
<span class="token keyword">if</span> <span class="token punctuation">(</span>isProduction<span class="token punctuation">)</span> <span class="token punctuation">{</span>
    plugins<span class="token punctuation">.</span><span class="token function">push</span><span class="token punctuation">(</span>
        <span class="token keyword">new</span> <span class="token class-name">CleanWebpackPlugin</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
    <span class="token punctuation">)</span>
<span class="token punctuation">}</span>


<span class="token keyword">const</span> filenames <span class="token operator">=</span> fs<span class="token punctuation">.</span><span class="token function">readdirSync</span><span class="token punctuation">(</span><span class="token string">'./src'</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">filter</span><span class="token punctuation">(</span><span class="token parameter">item</span> <span class="token operator">=&gt;</span> <span class="token regex"><span class="token regex-delimiter">/</span><span class="token regex-source language-regex">\.html$</span><span class="token regex-delimiter">/</span><span class="token regex-flags">ig</span></span><span class="token punctuation">.</span><span class="token function">test</span><span class="token punctuation">(</span>item<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">map</span><span class="token punctuation">(</span><span class="token parameter">item</span> <span class="token operator">=&gt;</span> item<span class="token punctuation">.</span><span class="token function">replace</span><span class="token punctuation">(</span><span class="token regex"><span class="token regex-delimiter">/</span><span class="token regex-source language-regex">\.html$</span><span class="token regex-delimiter">/</span><span class="token regex-flags">ig</span></span><span class="token punctuation">,</span> <span class="token string">''</span><span class="token punctuation">)</span><span class="token punctuation">)</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>filenames<span class="token punctuation">)</span>
<span class="token keyword">const</span> obj <span class="token operator">=</span> <span class="token punctuation">{</span><span class="token punctuation">}</span>
filenames<span class="token punctuation">.</span><span class="token function">map</span><span class="token punctuation">(</span><span class="token parameter">item</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
    obj<span class="token punctuation">[</span>item<span class="token punctuation">]</span> <span class="token operator">=</span> <span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">./src/js/</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>item<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string">.js</span><span class="token template-punctuation string">`</span></span>
<span class="token punctuation">}</span><span class="token punctuation">)</span>


module<span class="token punctuation">.</span>exports <span class="token operator">=</span> <span class="token punctuation">{</span>
    mode<span class="token operator">:</span> isProduction <span class="token operator">?</span> <span class="token string">'production'</span> <span class="token operator">:</span> <span class="token string">'development'</span><span class="token punctuation">,</span>
    optimization<span class="token operator">:</span> <span class="token punctuation">{</span>
        minimizer<span class="token operator">:</span> <span class="token punctuation">[</span><span class="token keyword">new</span> <span class="token class-name">TerserJSPlugin</span><span class="token punctuation">(</span><span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">,</span> <span class="token keyword">new</span> <span class="token class-name">OptimizeCSSAssetsPlugin</span><span class="token punctuation">(</span><span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
        splitChunks<span class="token operator">:</span> <span class="token punctuation">{</span>
            <span class="token function-variable function">name</span><span class="token operator">:</span> <span class="token punctuation">(</span><span class="token parameter">module<span class="token punctuation">,</span> chunks<span class="token punctuation">,</span> cacheGroupKey</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
                <span class="token comment">// console.log('-----', module, chunks, cacheGroupKey,'-----')</span>
                <span class="token keyword">return</span> <span class="token string">'v_commons'</span>
            <span class="token punctuation">}</span><span class="token punctuation">,</span>
            <span class="token comment">// 分割代码块（多页应用才会用到）</span>
            cacheGroups<span class="token operator">:</span> <span class="token punctuation">{</span>
                <span class="token comment">//缓存组</span>
                common<span class="token operator">:</span> <span class="token punctuation">{</span>
                    <span class="token comment">// 公共的模块</span>
                    chunks<span class="token operator">:</span> <span class="token string">&quot;initial&quot;</span><span class="token punctuation">,</span> <span class="token comment">// 从开始处抽离，有多种配置，像异步模块什么的</span>
                    minSize<span class="token operator">:</span> <span class="token number">0</span><span class="token punctuation">,</span> <span class="token comment">// 最小大小</span>
                    minChunks<span class="token operator">:</span> <span class="token number">2</span> <span class="token comment">//  引用次数</span>
                <span class="token punctuation">}</span><span class="token punctuation">,</span>
                vendor<span class="token operator">:</span> <span class="token punctuation">{</span>  <span class="token comment">// 此处为了抽离第三方的公共模块，比如jquery（前提是index和other都引入jquery了）</span>
                    priority<span class="token operator">:</span> <span class="token number">1</span><span class="token punctuation">,</span>  <span class="token comment">//权重， 如果不给这个字段，那么就此例来说，会先走上边的“common”，会把jquery和a.js，b.js合并在一个文件中。</span>
                    <span class="token comment">//如果还有别的入口只使用jquery了，但是a和b对于它来说就是无用的。加上权重之后，会将第三方模块单独抽离</span>
                    test<span class="token operator">:</span> <span class="token regex"><span class="token regex-delimiter">/</span><span class="token regex-source language-regex">node_modules</span><span class="token regex-delimiter">/</span></span><span class="token punctuation">,</span>
                    minSize<span class="token operator">:</span> <span class="token number">0</span><span class="token punctuation">,</span>
                    chunks<span class="token operator">:</span> <span class="token string">&quot;initial&quot;</span><span class="token punctuation">,</span>
                    minChunks<span class="token operator">:</span> <span class="token number">2</span><span class="token punctuation">,</span>
                <span class="token punctuation">}</span>
            <span class="token punctuation">}</span>
        <span class="token punctuation">}</span>
    <span class="token punctuation">}</span><span class="token punctuation">,</span>
    entry<span class="token operator">:</span> <span class="token punctuation">{</span>
        rem<span class="token operator">:</span> <span class="token string">'./src/js/rem.js'</span><span class="token punctuation">,</span>
        common<span class="token operator">:</span> <span class="token string">'./src/js/common.js'</span><span class="token punctuation">,</span>
        <span class="token operator">...</span>obj<span class="token punctuation">,</span>
    <span class="token punctuation">}</span><span class="token punctuation">,</span>
    output<span class="token operator">:</span> <span class="token punctuation">{</span>
        path<span class="token operator">:</span> path<span class="token punctuation">.</span><span class="token function">resolve</span><span class="token punctuation">(</span>__dirname<span class="token punctuation">,</span> <span class="token string">'./dist'</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
        filename<span class="token operator">:</span> <span class="token string">'js/[name].js'</span>
    <span class="token punctuation">}</span><span class="token punctuation">,</span>
    devServer<span class="token operator">:</span> <span class="token punctuation">{</span>
        host<span class="token operator">:</span> <span class="token string">'0.0.0.0'</span><span class="token punctuation">,</span>
        contentBase<span class="token operator">:</span> path<span class="token punctuation">.</span><span class="token function">join</span><span class="token punctuation">(</span>__dirname<span class="token punctuation">,</span> <span class="token string">&quot;dist&quot;</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
        compress<span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>
        port<span class="token operator">:</span> <span class="token number">9000</span><span class="token punctuation">,</span>
        hot<span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>
        hotOnly<span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>
        open<span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span>
        noInfo<span class="token operator">:</span> <span class="token boolean">true</span>
    <span class="token punctuation">}</span><span class="token punctuation">,</span>
    module<span class="token operator">:</span> <span class="token punctuation">{</span>
        rules<span class="token operator">:</span> <span class="token punctuation">[</span>
            <span class="token punctuation">{</span>
                test<span class="token operator">:</span> <span class="token regex"><span class="token regex-delimiter">/</span><span class="token regex-source language-regex">\.js$</span><span class="token regex-delimiter">/</span></span><span class="token punctuation">,</span>
                use<span class="token operator">:</span> <span class="token string">'babel-loader'</span><span class="token punctuation">,</span>
                exclude<span class="token operator">:</span> <span class="token regex"><span class="token regex-delimiter">/</span><span class="token regex-source language-regex">node_modules</span><span class="token regex-delimiter">/</span></span>
            <span class="token punctuation">}</span><span class="token punctuation">,</span>
            <span class="token punctuation">{</span>
                test<span class="token operator">:</span> <span class="token regex"><span class="token regex-delimiter">/</span><span class="token regex-source language-regex">\.(less)$</span><span class="token regex-delimiter">/</span></span><span class="token punctuation">,</span>
                use<span class="token operator">:</span> <span class="token punctuation">[</span>
                    isProduction <span class="token operator">?</span> <span class="token punctuation">{</span>
                        loader<span class="token operator">:</span> MiniCssExtractPlugin<span class="token punctuation">.</span>loader<span class="token punctuation">,</span>
                        options<span class="token operator">:</span> <span class="token punctuation">{</span>
                            publicPath<span class="token operator">:</span> <span class="token string">'../'</span>
                        <span class="token punctuation">}</span>
                    <span class="token punctuation">}</span> <span class="token operator">:</span> <span class="token string">'style-loader'</span><span class="token punctuation">,</span>
                    <span class="token string">'css-loader'</span><span class="token punctuation">,</span> <span class="token string">'postcss-loader'</span><span class="token punctuation">,</span> <span class="token string">'less-loader'</span>
                <span class="token punctuation">]</span>
            <span class="token punctuation">}</span><span class="token punctuation">,</span>
            <span class="token punctuation">{</span>
                test<span class="token operator">:</span> <span class="token regex"><span class="token regex-delimiter">/</span><span class="token regex-source language-regex">\.html$</span><span class="token regex-delimiter">/</span></span><span class="token punctuation">,</span>
                use<span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">'html-loader'</span><span class="token punctuation">]</span>
            <span class="token punctuation">}</span><span class="token punctuation">,</span>
            <span class="token punctuation">{</span>
                test<span class="token operator">:</span> <span class="token regex"><span class="token regex-delimiter">/</span><span class="token regex-source language-regex">\.(png|svg|jpg|gif)$</span><span class="token regex-delimiter">/</span></span><span class="token punctuation">,</span>
                loader<span class="token operator">:</span> require<span class="token punctuation">.</span><span class="token function">resolve</span><span class="token punctuation">(</span><span class="token string">'url-loader'</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
                options<span class="token operator">:</span> <span class="token punctuation">{</span>
                    limit<span class="token operator">:</span> <span class="token number">1000</span><span class="token punctuation">,</span>
                    name<span class="token operator">:</span> <span class="token string">'images/[name].[ext]'</span><span class="token punctuation">,</span>
                <span class="token punctuation">}</span><span class="token punctuation">,</span>
            <span class="token punctuation">}</span><span class="token punctuation">,</span>
        <span class="token punctuation">]</span>
    <span class="token punctuation">}</span><span class="token punctuation">,</span>
    plugins<span class="token operator">:</span> <span class="token punctuation">[</span>
        <span class="token keyword">new</span> <span class="token class-name">webpack<span class="token punctuation">.</span>DefinePlugin</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
            <span class="token string">'process.env'</span><span class="token operator">:</span> <span class="token punctuation">{</span>
                <span class="token string">'NODE_ENV'</span><span class="token operator">:</span> <span class="token constant">JSON</span><span class="token punctuation">.</span><span class="token function">stringify</span><span class="token punctuation">(</span>process<span class="token punctuation">.</span>env<span class="token punctuation">.</span>npm_lifecycle_event<span class="token punctuation">)</span>
            <span class="token punctuation">}</span>
        <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
        <span class="token keyword">new</span> <span class="token class-name">CopyPlugin</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
            patterns<span class="token operator">:</span> <span class="token punctuation">[</span>
                <span class="token punctuation">{</span> <span class="token keyword">from</span><span class="token operator">:</span> <span class="token string">'./src/public'</span><span class="token punctuation">,</span> to<span class="token operator">:</span> <span class="token string">'./public'</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
            <span class="token punctuation">]</span><span class="token punctuation">,</span>
        <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
        <span class="token keyword">new</span> <span class="token class-name">UglifyJsPlugin</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
            test<span class="token operator">:</span> <span class="token regex"><span class="token regex-delimiter">/</span><span class="token regex-source language-regex">\.js$</span><span class="token regex-delimiter">/</span></span><span class="token punctuation">,</span>
            include<span class="token operator">:</span> <span class="token regex"><span class="token regex-delimiter">/</span><span class="token regex-source language-regex">\/js</span><span class="token regex-delimiter">/</span></span><span class="token punctuation">,</span>
            exclude<span class="token operator">:</span> <span class="token punctuation">[</span><span class="token regex"><span class="token regex-delimiter">/</span><span class="token regex-source language-regex">node_modules</span><span class="token regex-delimiter">/</span></span><span class="token punctuation">]</span>
        <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
        <span class="token keyword">new</span> <span class="token class-name">MiniCssExtractPlugin</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
            filename<span class="token operator">:</span> <span class="token string">'css/[name].css'</span><span class="token punctuation">,</span>
            path<span class="token operator">:</span> <span class="token string">'../'</span>
        <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
        <span class="token operator">...</span>filenames<span class="token punctuation">.</span><span class="token function">map</span><span class="token punctuation">(</span><span class="token parameter">item</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
            <span class="token keyword">return</span> <span class="token keyword">new</span> <span class="token class-name">HtmlWebpackPlugin</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
                template<span class="token operator">:</span> <span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">./src/</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>item<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string">.html</span><span class="token template-punctuation string">`</span></span><span class="token punctuation">,</span>
                filename<span class="token operator">:</span> <span class="token template-string"><span class="token template-punctuation string">`</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>item<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string">.html</span><span class="token template-punctuation string">`</span></span><span class="token punctuation">,</span>
                chunks<span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">'rem'</span><span class="token punctuation">,</span> <span class="token string">'common'</span><span class="token punctuation">,</span> item<span class="token punctuation">]</span>
            <span class="token punctuation">}</span><span class="token punctuation">)</span>
        <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
        <span class="token comment">// require('autoprefixer'),</span>
        <span class="token operator">...</span>plugins<span class="token punctuation">,</span>
        <span class="token keyword">new</span> <span class="token class-name">ProgressBarPlugin</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
            format<span class="token operator">:</span> chalk<span class="token punctuation">.</span><span class="token function">green</span><span class="token punctuation">(</span><span class="token string">'Progressing'</span><span class="token punctuation">)</span> <span class="token operator">+</span> <span class="token string">'[:bar]'</span> <span class="token operator">+</span> chalk<span class="token punctuation">.</span><span class="token function">green</span><span class="token punctuation">(</span><span class="token string">':percent'</span><span class="token punctuation">)</span> <span class="token operator">+</span> <span class="token string">'(:elapsed seconds)'</span><span class="token punctuation">,</span>
            clear<span class="token operator">:</span> <span class="token boolean">false</span>
        <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
    <span class="token punctuation">]</span>
<span class="token punctuation">}</span>
</code></pre></div></li></ul> <hr> <h2 id="redux基本使用"><a href="#redux基本使用" class="header-anchor">#</a> Redux基本使用</h2> <ol><li>创建store目录</li> <li>在store目录下创建reducer.js</li></ol> <div class="language-javascript extra-class"><pre class="language-javascript"><code><span class="token keyword">const</span> defaultState<span class="token operator">=</span><span class="token punctuation">{</span>
    list<span class="token operator">:</span><span class="token punctuation">[</span><span class="token string">'妙蛙种子'</span><span class="token punctuation">,</span><span class="token string">'小火龙'</span><span class="token punctuation">,</span><span class="token string">'杰尼龟'</span><span class="token punctuation">]</span>
<span class="token punctuation">}</span>
<span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">(</span><span class="token parameter">state <span class="token operator">=</span> defaultState<span class="token punctuation">,</span>action</span><span class="token punctuation">)</span><span class="token operator">=&gt;</span><span class="token punctuation">{</span>
    <span class="token keyword">const</span> newState<span class="token operator">=</span><span class="token constant">JSON</span><span class="token punctuation">.</span><span class="token function">parse</span><span class="token punctuation">(</span><span class="token constant">JSON</span><span class="token punctuation">.</span><span class="token function">stringify</span><span class="token punctuation">(</span>state<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token keyword">if</span><span class="token punctuation">(</span>action<span class="token punctuation">.</span>type <span class="token operator">===</span> <span class="token string">&quot;addListName&quot;</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
        newState<span class="token punctuation">.</span>list<span class="token punctuation">.</span><span class="token function">push</span><span class="token punctuation">(</span>action<span class="token punctuation">.</span>value<span class="token punctuation">)</span>
        <span class="token keyword">return</span> newState<span class="token punctuation">;</span>
    <span class="token punctuation">}</span>
    <span class="token keyword">return</span> state
<span class="token punctuation">}</span>
</code></pre></div><ol start="3"><li>在store目录创建index.js</li></ol> <div class="language-javascript extra-class"><pre class="language-javascript"><code><span class="token keyword">import</span> <span class="token punctuation">{</span>createStore<span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'redux'</span>
<span class="token keyword">import</span> reducer <span class="token keyword">from</span> <span class="token string">'./reducer'</span>
<span class="token comment">// 创建数据存储仓库</span>
<span class="token keyword">const</span> store<span class="token operator">=</span><span class="token function">createStore</span><span class="token punctuation">(</span>
    reducer<span class="token punctuation">,</span>
    window<span class="token punctuation">.</span>__REDUX_DEVTOOLS_EXTENSION__ <span class="token operator">&amp;&amp;</span> window<span class="token punctuation">.</span><span class="token function">__REDUX_DEVTOOLS_EXTENSION__</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token comment">//谷歌浏览器redux插件激活</span>
<span class="token punctuation">)</span><span class="token punctuation">;</span>

<span class="token keyword">export</span> <span class="token keyword">default</span> store<span class="token punctuation">;</span>
</code></pre></div><ol start="4"><li>React中App.js为例</li></ol> <div class="language-react extra-class"><pre class="language-text"><code>import React,{Component} from 'react'
import 'antd/dist/antd.css';
import { Input,Button,List} from &quot;antd&quot;
import store from './store'

class App extends Component {
  constructor(props) {
    super(props)
    //store.getState()获取数据
    this.state = {
        list:store.getState().list, 
        name:&quot;&quot;
    }
     //订阅接收数据
     store.subscribe(()=&gt;{
       this.setState({
         list:store.getState().list
       })
     })
  }
    
  render() { 
    return (
        &lt;div&gt;
            &lt;Input value={this.state.name} onChange={this.onChangeInput} /&gt;
            &lt;Button onClick={this.onSubmit}&gt;确定&lt;/Button&gt;
            &lt;List bordered size=&quot;small&quot;
                dataSource={this.state.list}
                renderItem={(item,index)=&gt;(&lt;List.Item&gt;{item}&lt;/List.Item&gt;)}
                /&gt;
        &lt;/div&gt;
     )
  }
    
  onSubmit = () =&gt;{
    //派发数据
    store.dispatch({
      type:&quot;addListName&quot;,
      value:this.state.name
    });
  }
  
  onChangeInput = e =&gt; {
    this.setState({ name:e.target.value });
  }
}
export default App;
</code></pre></div><hr> <h2 id="vuex基本使用"><a href="#vuex基本使用" class="header-anchor">#</a> Vuex基本使用</h2> <ol><li>store.js</li></ol> <div class="language-javascript extra-class"><pre class="language-javascript"><code><span class="token keyword">import</span> Vue <span class="token keyword">from</span> <span class="token string">'vue'</span>
<span class="token keyword">import</span> Vuex <span class="token keyword">from</span> <span class="token string">'vuex'</span>

Vue<span class="token punctuation">.</span><span class="token function">use</span><span class="token punctuation">(</span>Vuex<span class="token punctuation">)</span><span class="token punctuation">;</span>

<span class="token keyword">const</span> types <span class="token operator">=</span> <span class="token punctuation">{</span>
    <span class="token constant">SET_USER</span><span class="token operator">:</span> <span class="token string">&quot;SET_USER&quot;</span>
<span class="token punctuation">}</span>

<span class="token keyword">const</span> state <span class="token operator">=</span> <span class="token punctuation">{</span>
    user<span class="token operator">:</span> <span class="token keyword">null</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span>
<span class="token keyword">const</span> getters <span class="token operator">=</span> <span class="token punctuation">{</span>
    <span class="token function-variable function">user</span><span class="token operator">:</span> <span class="token parameter">state</span> <span class="token operator">=&gt;</span> state<span class="token punctuation">.</span>user
<span class="token punctuation">}</span><span class="token punctuation">;</span>
<span class="token keyword">const</span> mutations <span class="token operator">=</span> <span class="token punctuation">{</span>
    <span class="token punctuation">[</span>types<span class="token punctuation">.</span><span class="token constant">SET_USER</span><span class="token punctuation">]</span><span class="token punctuation">(</span><span class="token parameter">state<span class="token punctuation">,</span> user</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
        <span class="token keyword">if</span> <span class="token punctuation">(</span>user<span class="token punctuation">)</span> state<span class="token punctuation">.</span>user <span class="token operator">=</span> user<span class="token punctuation">;</span>
        <span class="token keyword">else</span> state<span class="token punctuation">.</span>user <span class="token operator">=</span> <span class="token keyword">null</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span>
<span class="token comment">// 若存在异步须使用actions($store.dispatch)，</span>
<span class="token comment">// 若只是同步mutations也可($store.commit)</span>
<span class="token keyword">const</span> actions <span class="token operator">=</span> <span class="token punctuation">{</span>
    <span class="token function-variable function">setUser</span><span class="token operator">:</span> <span class="token punctuation">(</span><span class="token parameter"><span class="token punctuation">{</span> commit <span class="token punctuation">}</span><span class="token punctuation">,</span> user</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
        <span class="token keyword">return</span> <span class="token keyword">new</span> <span class="token class-name">Promise</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">resolve<span class="token punctuation">,</span>reject</span><span class="token punctuation">)</span><span class="token operator">=&gt;</span><span class="token punctuation">{</span>
            <span class="token function">commit</span><span class="token punctuation">(</span>types<span class="token punctuation">.</span><span class="token constant">SET_USER</span><span class="token punctuation">,</span> user<span class="token punctuation">)</span><span class="token punctuation">;</span>
            <span class="token function">resolve</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
        <span class="token punctuation">}</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span><span class="token punctuation">,</span>
    <span class="token function-variable function">clearLogin</span><span class="token operator">:</span> <span class="token punctuation">(</span><span class="token parameter"><span class="token punctuation">{</span> commit <span class="token punctuation">}</span></span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
        <span class="token keyword">return</span> <span class="token keyword">new</span> <span class="token class-name">Promise</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">resolve<span class="token punctuation">,</span>reject</span><span class="token punctuation">)</span><span class="token operator">=&gt;</span><span class="token punctuation">{</span>
        	<span class="token function">commit</span><span class="token punctuation">(</span>types<span class="token punctuation">.</span><span class="token constant">SET_USER</span><span class="token punctuation">,</span> <span class="token keyword">null</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
            <span class="token function">resolve</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
        <span class="token punctuation">}</span>
    <span class="token punctuation">}</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span>

<span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token keyword">new</span> <span class="token class-name">Vuex<span class="token punctuation">.</span>Store</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
    state<span class="token punctuation">,</span>
    getters<span class="token punctuation">,</span>
    mutations<span class="token punctuation">,</span>
    actions
<span class="token punctuation">}</span><span class="token punctuation">)</span>
</code></pre></div><ol start="2"><li>使用</li></ol> <div class="language-javascript extra-class"><pre class="language-javascript"><code><span class="token keyword">this</span><span class="token punctuation">.</span>$store
    <span class="token punctuation">.</span><span class="token function">dispatch</span><span class="token punctuation">(</span><span class="token string">'setUser'</span><span class="token punctuation">,</span><span class="token punctuation">{</span>usernmae<span class="token operator">:</span><span class="token string">&quot;mask&quot;</span><span class="token punctuation">}</span><span class="token punctuation">)</span>
    <span class="token punctuation">.</span><span class="token function">then</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token operator">=&gt;</span>console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'设置完成'</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token keyword">this</span><span class="token punctuation">.</span>$store
    <span class="token punctuation">.</span><span class="token function">dispatch</span><span class="token punctuation">(</span><span class="token string">&quot;clearLogin&quot;</span><span class="token punctuation">)</span>
    <span class="token punctuation">.</span><span class="token function">then</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token operator">=&gt;</span>console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'退出登录'</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre></div><hr> <h2 id="vue-config-js配置"><a href="#vue-config-js配置" class="header-anchor">#</a> vue.config.js配置</h2> <div class="language-javascript extra-class"><pre class="language-javascript"><code>module<span class="token punctuation">.</span>exports <span class="token operator">=</span> <span class="token punctuation">{</span>
    <span class="token comment">// 基本路径</span>
    <span class="token comment">//baseUrl: '/', cli 3.3已弃用</span>
    publicPath<span class="token operator">:</span> process<span class="token punctuation">.</span>env<span class="token punctuation">.</span><span class="token constant">NODE_ENV</span> <span class="token operator">===</span> <span class="token string">&quot;production&quot;</span> <span class="token operator">?</span> <span class="token string">&quot;./&quot;</span> <span class="token operator">:</span> <span class="token string">&quot;/&quot;</span><span class="token punctuation">,</span>
    <span class="token comment">// 输出文件目录</span>
    outputDir<span class="token operator">:</span> <span class="token string">'dist'</span><span class="token punctuation">,</span>
    <span class="token comment">// eslint-loader 是否在保存的时候检查</span>
    lintOnSave<span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>
    <span class="token comment">// https://vuejs.org/v2/guide/installation.html#Runtime-Compiler-vs-Runtime-only</span>
    <span class="token comment">//compiler: false,</span>
    <span class="token comment">// webpack配置</span>
    <span class="token comment">// see https://github.com/vuejs/vue-cli/blob/dev/docs/webpack.md</span>
    <span class="token function-variable function">chainWebpack</span><span class="token operator">:</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">,</span>
    <span class="token function-variable function">configureWebpack</span><span class="token operator">:</span> <span class="token parameter">config</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
        <span class="token comment">// 第三方插件配置</span>
        pluginOptions<span class="token operator">:</span> <span class="token punctuation">{</span><span class="token punctuation">}</span>
    <span class="token punctuation">}</span><span class="token punctuation">,</span>
    configureWebpack<span class="token operator">:</span><span class="token punctuation">{</span>
        <span class="token comment">// 路径配置</span>
        resolve<span class="token operator">:</span> <span class="token punctuation">{</span>
            <span class="token comment">//配置别名</span>
            alias<span class="token operator">:</span> <span class="token punctuation">{</span>
                assets<span class="token operator">:</span> <span class="token string">'@/assets'</span><span class="token punctuation">,</span>
                common<span class="token operator">:</span> <span class="token string">'@/common'</span><span class="token punctuation">,</span>
                components<span class="token operator">:</span> <span class="token string">'@/components'</span><span class="token punctuation">,</span>
                network<span class="token operator">:</span> <span class="token string">'@/network'</span><span class="token punctuation">,</span>
                views<span class="token operator">:</span> <span class="token string">'@/views'</span>
            <span class="token punctuation">}</span>
        <span class="token punctuation">}</span>
    <span class="token punctuation">}</span><span class="token punctuation">,</span>
    <span class="token comment">// vue-loader 配置项</span>
    <span class="token comment">// https://vue-loader.vuejs.org/en/options.html</span>
    <span class="token comment">//vueLoader: {},</span>
    <span class="token comment">// 生产环境是否生成 sourceMap 文件</span>
    productionSourceMap<span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>
    <span class="token comment">// css相关配置</span>
    css<span class="token operator">:</span> <span class="token punctuation">{</span>
        <span class="token comment">// 是否使用css分离插件 ExtractTextPlugin</span>
        extract<span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>
        <span class="token comment">// 开启 CSS source maps?</span>
        sourceMap<span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span>
        <span class="token comment">// css预设器配置项</span>
        loaderOptions<span class="token operator">:</span> <span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">,</span>
        <span class="token comment">// 启用 CSS modules for all css / pre-processor files.</span>
        modules<span class="token operator">:</span> <span class="token boolean">false</span>
    <span class="token punctuation">}</span><span class="token punctuation">,</span>
    parallel<span class="token operator">:</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">'os'</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">cpus</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">.</span>length <span class="token operator">&gt;</span> <span class="token number">1</span><span class="token punctuation">,</span>
    <span class="token comment">// 是否启用dll</span>
    <span class="token comment">// https://github.com/vuejs/vue-cli/blob/dev/docs/cli-service.md#dll-mode</span>
    <span class="token comment">// dll: false,</span>
    <span class="token comment">// PWA 插件相关配置</span>
    <span class="token comment">// https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-pwa</span>
    pwa<span class="token operator">:</span> <span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">,</span>
    <span class="token comment">// webpack-dev-server 相关配置</span>
    devServer<span class="token operator">:</span> <span class="token punctuation">{</span>
        open<span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>
        host<span class="token operator">:</span> <span class="token string">'localhost'</span><span class="token punctuation">,</span>
        port<span class="token operator">:</span> <span class="token number">8080</span><span class="token punctuation">,</span>
        https<span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span>
        hotOnly<span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span>
        proxy<span class="token operator">:</span> <span class="token punctuation">{</span>
            <span class="token comment">//配置跨域代理</span>
            <span class="token string">'/api'</span><span class="token operator">:</span> <span class="token punctuation">{</span>
                target<span class="token operator">:</span> <span class="token string">&quot;http://localhost:5000/api/&quot;</span><span class="token punctuation">,</span>
                ws<span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>
                changOrigin<span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>
                pathRewrite<span class="token operator">:</span> <span class="token punctuation">{</span>
                    <span class="token string">&quot;^/api&quot;</span><span class="token operator">:</span> <span class="token string">&quot;&quot;</span>
                <span class="token punctuation">}</span>
            <span class="token punctuation">}</span>
        <span class="token punctuation">}</span><span class="token punctuation">,</span>
        <span class="token function-variable function">before</span><span class="token operator">:</span> <span class="token parameter">app</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span><span class="token punctuation">}</span>
    <span class="token punctuation">}</span>
<span class="token punctuation">}</span>
</code></pre></div><hr> <h2 id="next-config-js配置"><a href="#next-config-js配置" class="header-anchor">#</a> next.config.js配置</h2> <div class="language-javascript extra-class"><pre class="language-javascript"><code><span class="token comment">//详见：https://nextjs.frontendx.cn/docs</span>
<span class="token keyword">const</span> withCss <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">'@zeit/next-css'</span><span class="token punctuation">)</span>

<span class="token keyword">if</span><span class="token punctuation">(</span><span class="token keyword">typeof</span> require <span class="token operator">!==</span> <span class="token string">'undefined'</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
    require<span class="token punctuation">.</span>extensions<span class="token punctuation">[</span><span class="token string">'.css'</span><span class="token punctuation">]</span><span class="token operator">=</span><span class="token parameter">file</span><span class="token operator">=&gt;</span><span class="token punctuation">{</span><span class="token punctuation">}</span>
<span class="token punctuation">}</span>

module<span class="token punctuation">.</span>exports <span class="token operator">=</span> <span class="token function">withCss</span><span class="token punctuation">(</span><span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">)</span>
</code></pre></div><hr> <h2 id="vue事件总线"><a href="#vue事件总线" class="header-anchor">#</a> Vue事件总线</h2> <div class="language-javascript extra-class"><pre class="language-javascript"><code><span class="token comment">//在main.js中挂在在原型挂在一个全新的vue实例</span>
<span class="token class-name">Vue</span><span class="token punctuation">.</span>prototype<span class="token punctuation">.</span>$bus <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Vue</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
</code></pre></div><div class="language-javascript extra-class"><pre class="language-javascript"><code><span class="token comment">//子组件中发出事件</span>
<span class="token keyword">this</span><span class="token punctuation">.</span>$bus<span class="token punctuation">.</span><span class="token function">$emit</span><span class="token punctuation">(</span><span class="token string">&quot;myOnLoad&quot;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre></div><div class="language-javascript extra-class"><pre class="language-javascript"><code><span class="token comment">//上级中执行监听</span>
<span class="token keyword">this</span><span class="token punctuation">.</span>$bus<span class="token punctuation">.</span><span class="token function">$on</span><span class="token punctuation">(</span><span class="token string">&quot;myOnLoad&quot;</span><span class="token punctuation">,</span><span class="token keyword">this</span><span class="token punctuation">.</span>myEvent<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token comment">//上级中取消监听</span>
<span class="token keyword">this</span><span class="token punctuation">.</span>$bus<span class="token punctuation">.</span><span class="token function">$off</span><span class="token punctuation">(</span><span class="token string">&quot;myOnLoad&quot;</span><span class="token punctuation">,</span><span class="token keyword">this</span><span class="token punctuation">.</span>myEvent<span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre></div><hr> <h2 id="vue插件封装"><a href="#vue插件封装" class="header-anchor">#</a> Vue插件封装</h2> <ol><li>介绍</li></ol> <div class="language-javascript extra-class"><pre class="language-javascript"><code><span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span>
    <span class="token function">install</span><span class="token punctuation">(</span><span class="token parameter">Vue<span class="token punctuation">,</span> options</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
        Vue<span class="token punctuation">.</span><span class="token function-variable function">myGlobalMethod</span> <span class="token operator">=</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>  <span class="token comment">// 1. 添加全局方法或属性，如:  vue-custom-element</span>
            <span class="token comment">// 逻辑...</span>
        <span class="token punctuation">}</span>

        Vue<span class="token punctuation">.</span><span class="token function">directive</span><span class="token punctuation">(</span><span class="token string">'my-directive'</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>  <span class="token comment">// 2. 添加全局资源：指令/过滤器/过渡等，如 vue-touch</span>
            <span class="token function">bind</span> <span class="token punctuation">(</span><span class="token parameter">el<span class="token punctuation">,</span> binding<span class="token punctuation">,</span> vnode<span class="token punctuation">,</span> oldVnode</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
                <span class="token comment">// 逻辑...</span>
            <span class="token punctuation">}</span>
        <span class="token punctuation">}</span><span class="token punctuation">)</span>
        
        <span class="token comment">// 3. 通过全局 mixin方法添加一些组件选项，如: vuex</span>
        Vue<span class="token punctuation">.</span><span class="token function">mixin</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
            <span class="token function-variable function">created</span><span class="token operator">:</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>  
                <span class="token comment">// 逻辑...</span>
            <span class="token punctuation">}</span>
        <span class="token punctuation">}</span><span class="token punctuation">)</span>    
        
        <span class="token comment">// 4. 添加实例方法，通过把它们添加到 Vue.prototype 上实现</span>
        <span class="token class-name">Vue</span><span class="token punctuation">.</span>prototype<span class="token punctuation">.</span><span class="token function-variable function">$myMethod</span> <span class="token operator">=</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token parameter">options</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>  
            <span class="token comment">// 逻辑...</span>
        <span class="token punctuation">}</span>
    <span class="token punctuation">}</span>
<span class="token punctuation">}</span>
</code></pre></div><ol start="2"><li>演示</li></ol> <ul><li>common/toast/Toast.vue</li></ul> <div class="language-vue extra-class"><pre class="language-vue"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">v-show</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>isShow<span class="token punctuation">&quot;</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>toast<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
        {{message}}    
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span>

<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript">
    <span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span>
        name<span class="token operator">:</span> <span class="token string">&quot;Toast&quot;</span><span class="token punctuation">,</span>
        <span class="token function">data</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
            <span class="token keyword">return</span> <span class="token punctuation">{</span>
                message<span class="token operator">:</span> <span class="token string">&quot;&quot;</span><span class="token punctuation">,</span>
                isShow<span class="token operator">:</span> <span class="token boolean">false</span>
            <span class="token punctuation">}</span>
        <span class="token punctuation">}</span><span class="token punctuation">,</span>
        methods<span class="token operator">:</span> <span class="token punctuation">{</span>
            <span class="token function">show</span><span class="token punctuation">(</span>msg <span class="token operator">=</span> <span class="token string">&quot;&quot;</span><span class="token punctuation">,</span>duration <span class="token operator">=</span> <span class="token number">2000</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
                <span class="token keyword">this</span><span class="token punctuation">.</span>isShow <span class="token operator">=</span> <span class="token boolean">true</span><span class="token punctuation">;</span>
                <span class="token keyword">this</span><span class="token punctuation">.</span>message <span class="token operator">=</span> msg<span class="token punctuation">;</span>
                <span class="token function">setTimeout</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token operator">=&gt;</span><span class="token punctuation">{</span>
                   <span class="token keyword">this</span><span class="token punctuation">.</span>isShow <span class="token operator">=</span> <span class="token boolean">false</span><span class="token punctuation">;</span>
                   <span class="token keyword">this</span><span class="token punctuation">.</span>message <span class="token operator">=</span> <span class="token string">&quot;&quot;</span><span class="token punctuation">;</span> 
                <span class="token punctuation">}</span><span class="token punctuation">,</span>duration<span class="token punctuation">)</span>
            <span class="token punctuation">}</span>
        <span class="token punctuation">}</span><span class="token punctuation">,</span>
    <span class="token punctuation">}</span>
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>

<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>style</span> <span class="token attr-name">scoped</span><span class="token punctuation">&gt;</span></span><span class="token style"><span class="token language-css">
<span class="token selector">.toast</span><span class="token punctuation">{</span>
    <span class="token property">background</span><span class="token punctuation">:</span> <span class="token function">rgba</span><span class="token punctuation">(</span>0<span class="token punctuation">,</span>0<span class="token punctuation">,</span>0<span class="token punctuation">,</span>0.7<span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token property">position</span><span class="token punctuation">:</span> fixed<span class="token punctuation">;</span>
    <span class="token property">color</span><span class="token punctuation">:</span>#fff<span class="token punctuation">;</span>
    <span class="token property">left</span><span class="token punctuation">:</span> 50%<span class="token punctuation">;</span>
    <span class="token property">bottom</span><span class="token punctuation">:</span> 30px<span class="token punctuation">;</span>
    <span class="token property">transform</span><span class="token punctuation">:</span> <span class="token function">translateX</span><span class="token punctuation">(</span>-50%<span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token property">box-sizing</span><span class="token punctuation">:</span> border-box<span class="token punctuation">;</span>
    <span class="token property">padding</span><span class="token punctuation">:</span> 5px 10px<span class="token punctuation">;</span>
    <span class="token property">border-radius</span><span class="token punctuation">:</span> 5px<span class="token punctuation">;</span>
    <span class="token property">font-size</span><span class="token punctuation">:</span> 12px<span class="token punctuation">;</span>
    <span class="token property">line-height</span><span class="token punctuation">:</span> 20px<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>style</span><span class="token punctuation">&gt;</span></span>
</code></pre></div><ul><li>common/toast/index.js</li></ul> <div class="language-javascript extra-class"><pre class="language-javascript"><code><span class="token keyword">import</span> Toast <span class="token keyword">from</span> <span class="token string">&quot;./Toast.vue&quot;</span><span class="token punctuation">;</span>

<span class="token keyword">const</span> obj <span class="token operator">=</span> <span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">;</span>

obj<span class="token punctuation">.</span><span class="token function-variable function">install</span> <span class="token operator">=</span> <span class="token parameter">Vue</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
    <span class="token comment">//1.创建组件构造器</span>
    <span class="token keyword">const</span> toastContrustor <span class="token operator">=</span> Vue<span class="token punctuation">.</span><span class="token function">extend</span><span class="token punctuation">(</span>Toast<span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token comment">//2.实例化组件</span>
    <span class="token keyword">const</span> toast <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">toastContrustor</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token comment">//3.将组件手动挂载到元素上</span>
    toast<span class="token punctuation">.</span><span class="token function">$mount</span><span class="token punctuation">(</span>document<span class="token punctuation">.</span><span class="token function">createElement</span><span class="token punctuation">(</span><span class="token string">&quot;div&quot;</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token comment">//4.将组件的对应元素添加到body中</span>
    document<span class="token punctuation">.</span>body<span class="token punctuation">.</span><span class="token function">appendChild</span><span class="token punctuation">(</span>toast<span class="token punctuation">.</span>$el<span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token comment">//5.在Vue原型中声明组件</span>
    <span class="token class-name">Vue</span><span class="token punctuation">.</span>prototype<span class="token punctuation">.</span>$toast <span class="token operator">=</span> toast<span class="token punctuation">;</span>
<span class="token punctuation">}</span>

<span class="token keyword">export</span> <span class="token keyword">default</span> obj<span class="token punctuation">;</span>
</code></pre></div><ul><li>main.js</li></ul> <div class="language-javascript extra-class"><pre class="language-javascript"><code><span class="token keyword">import</span> Vue <span class="token keyword">from</span> <span class="token string">'vue'</span>
<span class="token keyword">import</span> App <span class="token keyword">from</span> <span class="token string">'./App.vue'</span>
<span class="token keyword">import</span> router <span class="token keyword">from</span> <span class="token string">'./router'</span>
<span class="token keyword">import</span> toast <span class="token keyword">from</span> <span class="token string">'./common/toast'</span>

Vue<span class="token punctuation">.</span>config<span class="token punctuation">.</span>productionTip <span class="token operator">=</span> <span class="token boolean">false</span><span class="token punctuation">;</span>

<span class="token comment">//安装组件</span>
Vue<span class="token punctuation">.</span><span class="token function">use</span><span class="token punctuation">(</span>toast<span class="token punctuation">)</span><span class="token punctuation">;</span>

<span class="token keyword">new</span> <span class="token class-name">Vue</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
    router<span class="token punctuation">,</span>
    <span class="token function-variable function">render</span><span class="token operator">:</span> <span class="token parameter">h</span> <span class="token operator">=&gt;</span> <span class="token function">h</span><span class="token punctuation">(</span>App<span class="token punctuation">)</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">$mount</span><span class="token punctuation">(</span><span class="token string">'#app'</span><span class="token punctuation">)</span>
</code></pre></div><hr> <h2 id="网络模块封装"><a href="#网络模块封装" class="header-anchor">#</a> 网络模块封装</h2> <h3 id="案例-uni-app"><a href="#案例-uni-app" class="header-anchor">#</a> 案例:uni-app</h3> <ol><li>创建config.js</li></ol> <div class="language-javascript extra-class"><pre class="language-javascript"><code><span class="token keyword">const</span> serverUrl <span class="token operator">=</span> <span class="token string">&quot;&quot;</span><span class="token punctuation">;</span> <span class="token comment">//配置请求服务器路径</span>

module<span class="token punctuation">.</span>exports <span class="token operator">=</span> <span class="token punctuation">{</span>
    serverUrl
<span class="token punctuation">}</span>
</code></pre></div><ol start="2"><li>封装request.js</li></ol> <div class="language-javascript extra-class"><pre class="language-javascript"><code><span class="token keyword">import</span> <span class="token punctuation">{</span>
	serverUrl
<span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&quot;./config.js&quot;</span><span class="token punctuation">;</span>

<span class="token keyword">function</span> <span class="token function">sendRequest</span><span class="token punctuation">(</span><span class="token parameter"><span class="token punctuation">{</span>
	url<span class="token punctuation">,</span>
	method<span class="token punctuation">,</span>
	data<span class="token punctuation">,</span>
	header
<span class="token punctuation">}</span></span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
	<span class="token keyword">return</span> <span class="token keyword">new</span> <span class="token class-name">Promise</span><span class="token punctuation">(</span><span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">resolve<span class="token punctuation">,</span> reject</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
		uni<span class="token punctuation">.</span><span class="token function">showLoading</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
			title<span class="token operator">:</span> <span class="token string">'加载中'</span>
		<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
		uni<span class="token punctuation">.</span><span class="token function">request</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
			url<span class="token punctuation">,</span>
			data<span class="token punctuation">,</span>
			method<span class="token punctuation">,</span>
			header<span class="token punctuation">,</span>
			<span class="token function-variable function">success</span><span class="token operator">:</span> <span class="token parameter">res</span> <span class="token operator">=&gt;</span> <span class="token function">resolve</span><span class="token punctuation">(</span>res<span class="token punctuation">.</span>data<span class="token punctuation">)</span><span class="token punctuation">,</span>
			fail<span class="token operator">:</span> reject<span class="token punctuation">,</span>
			<span class="token function-variable function">complete</span><span class="token operator">:</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
				uni<span class="token punctuation">.</span><span class="token function">hideLoading</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
			<span class="token punctuation">}</span>
		<span class="token punctuation">}</span><span class="token punctuation">)</span>
	<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span>

<span class="token keyword">function</span> <span class="token function">MyHttp</span><span class="token punctuation">(</span><span class="token parameter">defaultParams<span class="token punctuation">,</span> allRequest</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
	<span class="token keyword">let</span> resource <span class="token operator">=</span> <span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">;</span>
	<span class="token keyword">let</span> header <span class="token operator">=</span> <span class="token punctuation">{</span>
		<span class="token string">'content-type'</span><span class="token operator">:</span> <span class="token string">'application/x-www-form-urlencoded;charset=utf-8;Authorization'</span>
	<span class="token punctuation">}</span>
	<span class="token keyword">for</span> <span class="token punctuation">(</span><span class="token keyword">let</span> key <span class="token keyword">in</span> allRequest<span class="token punctuation">)</span> <span class="token punctuation">{</span>
		<span class="token keyword">let</span> request <span class="token operator">=</span> allRequest<span class="token punctuation">[</span>key<span class="token punctuation">]</span><span class="token punctuation">;</span>
		resource<span class="token punctuation">[</span>key<span class="token punctuation">]</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token parameter">data</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
            data <span class="token operator">=</span> Object<span class="token punctuation">.</span><span class="token function">assign</span><span class="token punctuation">(</span><span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">,</span>defaultParams<span class="token punctuation">,</span>data<span class="token punctuation">)</span><span class="token punctuation">;</span>
			<span class="token keyword">return</span> <span class="token function">sendRequest</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
				url<span class="token operator">:</span> serverUrl <span class="token operator">+</span> request<span class="token punctuation">.</span>url<span class="token punctuation">,</span>
				method<span class="token operator">:</span> request<span class="token punctuation">.</span>method<span class="token punctuation">,</span>
				data<span class="token punctuation">,</span>
				header
			<span class="token punctuation">}</span><span class="token punctuation">)</span>
		<span class="token punctuation">}</span>
	<span class="token punctuation">}</span>
	<span class="token keyword">return</span> resource<span class="token punctuation">;</span>
<span class="token punctuation">}</span>

<span class="token keyword">export</span> <span class="token keyword">default</span> MyHttp<span class="token punctuation">;</span>
</code></pre></div><ol start="3"><li>创建api.js,配置其相关请求接口</li></ol> <div class="language-javascript extra-class"><pre class="language-javascript"><code><span class="token keyword">import</span> MyHttp <span class="token keyword">from</span> <span class="token string">'./request.js'</span><span class="token punctuation">;</span>

 <span class="token comment">//配置接口</span>
<span class="token keyword">const</span> allRequest <span class="token operator">=</span> <span class="token punctuation">{</span>
	getBannerList<span class="token operator">:</span> <span class="token punctuation">{</span>
		method<span class="token operator">:</span> <span class="token string">'GET'</span><span class="token punctuation">,</span>
		url<span class="token operator">:</span> <span class="token string">'index/carousel/list'</span>
	<span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span>

<span class="token keyword">const</span> <span class="token constant">API</span> <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">MyHttp</span><span class="token punctuation">(</span><span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">,</span> allRequest<span class="token punctuation">)</span><span class="token punctuation">;</span>

module<span class="token punctuation">.</span>exports <span class="token operator">=</span> <span class="token constant">API</span><span class="token punctuation">;</span>
</code></pre></div><hr> <h3 id="案例-element-ui-axios"><a href="#案例-element-ui-axios" class="header-anchor">#</a> 案例:element-ui+axios</h3> <ol><li>创建request.js</li></ol> <div class="language-javascript extra-class"><pre class="language-javascript"><code><span class="token keyword">import</span> axios <span class="token keyword">from</span> <span class="token string">'axios'</span>
<span class="token keyword">import</span> <span class="token punctuation">{</span> Message<span class="token punctuation">,</span> Loading <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'element-ui'</span><span class="token punctuation">;</span>

<span class="token keyword">const</span> loading<span class="token punctuation">;</span>

<span class="token keyword">function</span> <span class="token function">startLoading</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    loading <span class="token operator">=</span> Loading<span class="token punctuation">.</span><span class="token function">service</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
        lock<span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>
        text<span class="token operator">:</span> <span class="token string">&quot;加载中..&quot;</span><span class="token punctuation">,</span>
        background<span class="token operator">:</span> <span class="token string">&quot;rgba(0,0,0,.7)&quot;</span>
    <span class="token punctuation">}</span><span class="token punctuation">)</span>
<span class="token punctuation">}</span>

<span class="token keyword">function</span> <span class="token function">endLoading</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    loading<span class="token punctuation">.</span><span class="token function">close</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>

<span class="token comment">// ES6 Promise的封装</span>
<span class="token keyword">const</span> <span class="token function-variable function">request</span> <span class="token operator">=</span> <span class="token parameter">options</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
        <span class="token comment">// 创建axios的实例对象</span>
        <span class="token keyword">const</span> instance <span class="token operator">=</span> axios<span class="token punctuation">.</span><span class="token function">create</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
            baseURL<span class="token operator">:</span> <span class="token string">''</span><span class="token punctuation">,</span> <span class="token comment">//配置请求服务器路径</span>
            timeout<span class="token operator">:</span> <span class="token number">5000</span> <span class="token comment">//超时</span>
        <span class="token punctuation">}</span><span class="token punctuation">)</span>
        
        <span class="token comment">// 过滤器(拦截器)接收</span>
        instance<span class="token punctuation">.</span>interceptors<span class="token punctuation">.</span>request<span class="token punctuation">.</span><span class="token function">use</span><span class="token punctuation">(</span><span class="token parameter">options</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
            <span class="token function">startLoading</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
            <span class="token keyword">return</span> options<span class="token punctuation">;</span>
        <span class="token punctuation">}</span><span class="token punctuation">)</span>    
        
        <span class="token comment">// 过滤器(拦截器)响应</span>
        instance<span class="token punctuation">.</span>interceptors<span class="token punctuation">.</span>response<span class="token punctuation">.</span><span class="token function">use</span><span class="token punctuation">(</span><span class="token parameter">res</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
            <span class="token function">endLoading</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
            <span class="token keyword">return</span> res<span class="token punctuation">.</span>data<span class="token punctuation">;</span>
        <span class="token punctuation">}</span><span class="token punctuation">,</span><span class="token parameter">err</span><span class="token operator">=&gt;</span><span class="token punctuation">{</span>
            <span class="token function">endLoading</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
            Message<span class="token punctuation">.</span><span class="token function">error</span><span class="token punctuation">(</span><span class="token string">&quot;系统错误&quot;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
        <span class="token punctuation">}</span><span class="token punctuation">)</span>

        <span class="token comment">// 发送真正的网络请求</span>
        <span class="token keyword">return</span> <span class="token function">instance</span><span class="token punctuation">(</span>options<span class="token punctuation">)</span>
<span class="token punctuation">}</span>

<span class="token keyword">export</span> <span class="token keyword">default</span> request<span class="token punctuation">;</span>
</code></pre></div><ol start="2"><li>创建api.js,配置其相关请求接口</li></ol> <div class="language-javascript extra-class"><pre class="language-javascript"><code><span class="token keyword">import</span> request <span class="token keyword">from</span> <span class="token string">&quot;./request&quot;</span><span class="token punctuation">;</span>

<span class="token keyword">export</span> <span class="token keyword">function</span> <span class="token function">getMultiData</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token keyword">return</span> <span class="token function">request</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
    url<span class="token operator">:</span> <span class="token string">'/home/banner'</span><span class="token punctuation">,</span>
    method<span class="token operator">:</span> <span class="token string">'get'</span>
  <span class="token punctuation">}</span><span class="token punctuation">)</span>
<span class="token punctuation">}</span>

<span class="token keyword">export</span> <span class="token keyword">function</span> <span class="token function">getProductData</span><span class="token punctuation">(</span><span class="token parameter">type<span class="token punctuation">,</span> page</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token keyword">return</span> <span class="token function">request</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
    url<span class="token operator">:</span> <span class="token string">'/home/list'</span><span class="token punctuation">,</span>
    method<span class="token operator">:</span> <span class="token string">'post'</span><span class="token punctuation">,</span>
    params<span class="token operator">:</span> <span class="token punctuation">{</span>
      type<span class="token punctuation">,</span>
      page
    <span class="token punctuation">}</span>
  <span class="token punctuation">}</span><span class="token punctuation">)</span>
<span class="token punctuation">}</span>
</code></pre></div><hr> <h2 id="fastclick的使用"><a href="#fastclick的使用" class="header-anchor">#</a> FastClick的使用</h2> <ul><li>javascript</li></ul> <div class="language-javascript extra-class"><pre class="language-javascript"><code><span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token string">'addEventListener'</span> <span class="token keyword">in</span> document<span class="token punctuation">)</span> <span class="token punctuation">{</span>    
    document<span class="token punctuation">.</span><span class="token function">addEventListener</span><span class="token punctuation">(</span><span class="token string">'DOMContentLoaded'</span><span class="token punctuation">,</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>      
        FastClick<span class="token punctuation">.</span><span class="token function">attach</span><span class="token punctuation">(</span>document<span class="token punctuation">.</span>body<span class="token punctuation">)</span><span class="token punctuation">;</span>    
    <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token boolean">false</span><span class="token punctuation">)</span><span class="token punctuation">;</span>  
<span class="token punctuation">}</span>
</code></pre></div><ul><li>jquery</li></ul> <div class="language-javascript extra-class"><pre class="language-javascript"><code><span class="token function">$</span><span class="token punctuation">(</span><span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  FastClick<span class="token punctuation">.</span><span class="token function">attach</span><span class="token punctuation">(</span>document<span class="token punctuation">.</span>body<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre></div><ul><li>Vue</li></ul> <div class="language-javascript extra-class"><pre class="language-javascript"><code> <span class="token keyword">import</span> FastClick <span class="token keyword">from</span> <span class="token string">'fastclick'</span>
 FastClick<span class="token punctuation">.</span><span class="token function">attach</span><span class="token punctuation">(</span>document<span class="token punctuation">.</span>body<span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre></div><hr> <h2 id="rem转换"><a href="#rem转换" class="header-anchor">#</a> rem转换</h2> <div class="language-javascript extra-class"><pre class="language-javascript"><code><span class="token punctuation">(</span><span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">var</span> html <span class="token operator">=</span> document<span class="token punctuation">.</span>documentElement<span class="token punctuation">;</span>
    <span class="token keyword">function</span> <span class="token function">onWindowResize</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
        <span class="token keyword">var</span> head<span class="token punctuation">,</span> viewport
        <span class="token operator">/</span><span class="token punctuation">(</span>iPhone<span class="token operator">|</span>iPad<span class="token operator">|</span>iPhone <span class="token constant">OS</span><span class="token operator">|</span>Phone<span class="token operator">|</span>iPod<span class="token operator">|</span>iOS<span class="token punctuation">)</span><span class="token operator">/</span>i<span class="token punctuation">.</span><span class="token function">test</span><span class="token punctuation">(</span>navigator<span class="token punctuation">.</span>userAgent<span class="token punctuation">)</span> <span class="token operator">&amp;&amp;</span> <span class="token punctuation">(</span>
            head <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">getElementsByTagName</span><span class="token punctuation">(</span><span class="token string">'head'</span><span class="token punctuation">)</span><span class="token punctuation">,</span> viewport <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">createElement</span><span class="token punctuation">(</span><span class="token string">'meta'</span><span class="token punctuation">)</span><span class="token punctuation">,</span> viewport<span class="token punctuation">.</span>name <span class="token operator">=</span> <span class="token string">'viewport'</span><span class="token punctuation">,</span> viewport<span class="token punctuation">.</span>content <span class="token operator">=</span> <span class="token string">'target-densitydpi=device-dpi, width=480px, user-scalable=no'</span><span class="token punctuation">,</span> head<span class="token punctuation">.</span>length <span class="token operator">&gt;</span> <span class="token number">0</span> <span class="token operator">&amp;&amp;</span> head<span class="token punctuation">[</span>head<span class="token punctuation">.</span>length <span class="token operator">-</span> <span class="token number">1</span><span class="token punctuation">]</span><span class="token punctuation">.</span><span class="token function">appendChild</span><span class="token punctuation">(</span>viewport<span class="token punctuation">)</span>
        <span class="token punctuation">)</span><span class="token punctuation">;</span>
        <span class="token keyword">if</span> <span class="token punctuation">(</span>html<span class="token punctuation">.</span><span class="token function">getBoundingClientRect</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">.</span>width <span class="token operator">&gt;=</span> <span class="token number">1024</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
            html<span class="token punctuation">.</span>style<span class="token punctuation">.</span>fontSize <span class="token operator">=</span> <span class="token number">16</span> <span class="token operator">+</span> <span class="token string">'px'</span><span class="token punctuation">;</span>
            <span class="token keyword">return</span>
        <span class="token punctuation">}</span>
        html<span class="token punctuation">.</span>style<span class="token punctuation">.</span>fontSize <span class="token operator">=</span> html<span class="token punctuation">.</span><span class="token function">getBoundingClientRect</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">.</span>width <span class="token operator">/</span> <span class="token number">3.75</span> <span class="token operator">+</span> <span class="token string">'px'</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span>

    window<span class="token punctuation">.</span><span class="token function">addEventListener</span><span class="token punctuation">(</span><span class="token string">'resize'</span><span class="token punctuation">,</span> onWindowResize<span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token function">onWindowResize</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre></div><div class="language-javascript extra-class"><pre class="language-javascript"><code><span class="token punctuation">(</span><span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">doc<span class="token punctuation">,</span> win</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
	<span class="token keyword">var</span> docEl <span class="token operator">=</span> doc<span class="token punctuation">.</span>documentElement<span class="token punctuation">,</span>
		resizeEvt <span class="token operator">=</span> <span class="token string">'orientationchange'</span> <span class="token keyword">in</span> window <span class="token operator">?</span> <span class="token string">'orientationchange'</span> <span class="token operator">:</span> <span class="token string">'resize'</span><span class="token punctuation">,</span>
		<span class="token function-variable function">recalc</span> <span class="token operator">=</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
			<span class="token keyword">var</span> clientWidth <span class="token operator">=</span> docEl<span class="token punctuation">.</span>clientWidth<span class="token punctuation">;</span>
			<span class="token keyword">if</span><span class="token punctuation">(</span><span class="token operator">!</span>clientWidth<span class="token punctuation">)</span> <span class="token keyword">return</span><span class="token punctuation">;</span>
			docEl<span class="token punctuation">.</span>style<span class="token punctuation">.</span>fontSize <span class="token operator">=</span> <span class="token number">200</span> <span class="token operator">*</span> <span class="token punctuation">(</span>clientWidth <span class="token operator">/</span> <span class="token number">750</span><span class="token punctuation">)</span> <span class="token operator">+</span> <span class="token string">'px'</span><span class="token punctuation">;</span>
		<span class="token punctuation">}</span><span class="token punctuation">;</span>
	<span class="token keyword">if</span><span class="token punctuation">(</span><span class="token operator">!</span>doc<span class="token punctuation">.</span>addEventListener<span class="token punctuation">)</span> <span class="token keyword">return</span><span class="token punctuation">;</span>
	win<span class="token punctuation">.</span><span class="token function">addEventListener</span><span class="token punctuation">(</span>resizeEvt<span class="token punctuation">,</span> recalc<span class="token punctuation">,</span> <span class="token boolean">false</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
	doc<span class="token punctuation">.</span><span class="token function">addEventListener</span><span class="token punctuation">(</span><span class="token string">'DOMContentLoaded'</span><span class="token punctuation">,</span> recalc<span class="token punctuation">,</span> <span class="token boolean">false</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">(</span>document<span class="token punctuation">,</span> window<span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre></div><hr> <h2 id="防抖-节流"><a href="#防抖-节流" class="header-anchor">#</a> 防抖&amp;节流</h2> <ol><li>防抖</li></ol> <div class="language-javascript extra-class"><pre class="language-javascript"><code><span class="token keyword">function</span> <span class="token function">debounce</span><span class="token punctuation">(</span><span class="token parameter">handler<span class="token punctuation">,</span> delay</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">var</span> handler <span class="token operator">=</span> handler <span class="token operator">||</span> <span class="token keyword">null</span><span class="token punctuation">;</span>
    <span class="token keyword">var</span> delay <span class="token operator">=</span> <span class="token operator">~</span><span class="token operator">~</span>delay <span class="token operator">||</span> <span class="token number">1000</span><span class="token punctuation">;</span>
    <span class="token keyword">var</span> timer <span class="token operator">=</span> <span class="token keyword">null</span><span class="token punctuation">;</span>
    <span class="token keyword">return</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
        <span class="token function">clearTimeout</span><span class="token punctuation">(</span>timer<span class="token punctuation">)</span>
        timer <span class="token operator">=</span> <span class="token function">setTimeout</span><span class="token punctuation">(</span><span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
            <span class="token function">handler</span><span class="token punctuation">.</span><span class="token function">apply</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">,</span> arguments<span class="token punctuation">)</span><span class="token punctuation">;</span>
        <span class="token punctuation">}</span><span class="token punctuation">.</span><span class="token function">bind</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">)</span><span class="token punctuation">,</span> delay<span class="token punctuation">)</span>
    <span class="token punctuation">}</span>
<span class="token punctuation">}</span>
</code></pre></div><ol start="2"><li>节流</li></ol> <div class="language-javascript extra-class"><pre class="language-javascript"><code><span class="token keyword">function</span> <span class="token function">trottle</span><span class="token punctuation">(</span><span class="token parameter">handler<span class="token punctuation">,</span> delay</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">var</span> handler <span class="token operator">=</span> handler <span class="token operator">||</span> <span class="token keyword">null</span><span class="token punctuation">;</span>
    <span class="token keyword">var</span> delay <span class="token operator">=</span> <span class="token operator">~</span><span class="token operator">~</span>delay <span class="token operator">||</span> <span class="token number">1000</span><span class="token punctuation">;</span>
    <span class="token keyword">var</span> last <span class="token operator">=</span> <span class="token number">0</span><span class="token punctuation">;</span>
    <span class="token keyword">return</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">e</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
        <span class="token keyword">var</span> now <span class="token operator">=</span> <span class="token operator">+</span><span class="token keyword">new</span> <span class="token class-name">Date</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
        <span class="token keyword">if</span><span class="token punctuation">(</span>now <span class="token operator">-</span> last <span class="token operator">&gt;</span> delay<span class="token punctuation">)</span> <span class="token punctuation">{</span>
            <span class="token function">handler</span><span class="token punctuation">.</span><span class="token function">apply</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">,</span> arguments<span class="token punctuation">)</span><span class="token punctuation">;</span>
            last <span class="token operator">=</span> now<span class="token punctuation">;</span>
        <span class="token punctuation">}</span>
    <span class="token punctuation">}</span>
<span class="token punctuation">}</span>
</code></pre></div><hr> <h2 id="浅拷贝"><a href="#浅拷贝" class="header-anchor">#</a> 浅拷贝</h2> <div class="language-javascript extra-class"><pre class="language-javascript"><code>Object<span class="token punctuation">.</span>assign <span class="token operator">=</span> Object<span class="token punctuation">.</span>assign <span class="token operator">||</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
    <span class="token keyword">if</span><span class="token punctuation">(</span>arguments<span class="token punctuation">.</span>length <span class="token operator">==</span> <span class="token number">0</span><span class="token punctuation">)</span> <span class="token keyword">throw</span> <span class="token keyword">new</span> <span class="token class-name">TypeError</span><span class="token punctuation">(</span><span class="token string">'Cannot convert undefined or null to object'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

    <span class="token keyword">var</span> target <span class="token operator">=</span> arguments<span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
        args <span class="token operator">=</span> <span class="token class-name">Array</span><span class="token punctuation">.</span>prototype<span class="token punctuation">.</span><span class="token function">slice</span><span class="token punctuation">.</span><span class="token function">call</span><span class="token punctuation">(</span>arguments<span class="token punctuation">,</span> <span class="token number">1</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
        key
    args<span class="token punctuation">.</span><span class="token function">forEach</span><span class="token punctuation">(</span><span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">item</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
        <span class="token keyword">for</span><span class="token punctuation">(</span>key <span class="token keyword">in</span> item<span class="token punctuation">)</span><span class="token punctuation">{</span>
            item<span class="token punctuation">.</span><span class="token function">hasOwnProperty</span><span class="token punctuation">(</span>key<span class="token punctuation">)</span> <span class="token operator">&amp;&amp;</span> <span class="token punctuation">(</span> target<span class="token punctuation">[</span>key<span class="token punctuation">]</span> <span class="token operator">=</span> item<span class="token punctuation">[</span>key<span class="token punctuation">]</span> <span class="token punctuation">)</span>
        <span class="token punctuation">}</span>
    <span class="token punctuation">}</span><span class="token punctuation">)</span>
    <span class="token keyword">return</span> target
<span class="token punctuation">}</span>
</code></pre></div><hr> <h2 id="深度拷贝"><a href="#深度拷贝" class="header-anchor">#</a> 深度拷贝</h2> <div class="language-javascript extra-class"><pre class="language-javascript"><code><span class="token keyword">function</span> <span class="token function">deepClone</span><span class="token punctuation">(</span><span class="token parameter">obj1<span class="token punctuation">,</span> obj2</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">var</span> obj2 <span class="token operator">=</span> obj2 <span class="token operator">||</span> <span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">;</span>
    <span class="token keyword">var</span> toStr<span class="token operator">=</span><span class="token class-name">Object</span><span class="token punctuation">.</span>prototype<span class="token punctuation">.</span>toString<span class="token punctuation">;</span>
    <span class="token keyword">var</span> arrStr<span class="token operator">=</span><span class="token function">toStr</span><span class="token punctuation">.</span><span class="token function">call</span><span class="token punctuation">(</span><span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token keyword">for</span><span class="token punctuation">(</span><span class="token keyword">var</span> prop <span class="token keyword">in</span> obj1<span class="token punctuation">)</span> <span class="token punctuation">{</span>
        <span class="token keyword">if</span><span class="token punctuation">(</span>obj1<span class="token punctuation">.</span><span class="token function">hasOwnProperty</span><span class="token punctuation">(</span>prop<span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>	
            <span class="token keyword">if</span><span class="token punctuation">(</span>obj1<span class="token punctuation">[</span>prop<span class="token punctuation">]</span><span class="token operator">!==</span><span class="token keyword">null</span><span class="token operator">&amp;&amp;</span><span class="token keyword">typeof</span><span class="token punctuation">(</span>obj1<span class="token punctuation">[</span>prop<span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token operator">==</span><span class="token string">&quot;object&quot;</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
                obj2<span class="token punctuation">[</span>prop<span class="token punctuation">]</span><span class="token operator">=</span><span class="token function">toStr</span><span class="token punctuation">.</span><span class="token function">call</span><span class="token punctuation">(</span>obj1<span class="token punctuation">[</span>prop<span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token operator">==</span>arrStr<span class="token operator">?</span><span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token operator">:</span><span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">;</span>
                <span class="token function">deepClone</span><span class="token punctuation">(</span>obj1<span class="token punctuation">[</span>prop<span class="token punctuation">]</span><span class="token punctuation">,</span>obj2<span class="token punctuation">[</span>prop<span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
            <span class="token punctuation">}</span>
            <span class="token keyword">else</span><span class="token punctuation">{</span>
                obj2<span class="token punctuation">[</span>prop<span class="token punctuation">]</span> <span class="token operator">=</span> obj1<span class="token punctuation">[</span>prop<span class="token punctuation">]</span><span class="token punctuation">;</span>
            <span class="token punctuation">}</span>					
        <span class="token punctuation">}</span>
    <span class="token punctuation">}</span>
    <span class="token keyword">return</span> obj2<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre></div><hr> <h2 id="对象是否为空"><a href="#对象是否为空" class="header-anchor">#</a> 对象是否为空</h2> <div class="language-javascript extra-class"><pre class="language-javascript"><code><span class="token keyword">function</span> <span class="token function">isEmpty</span><span class="token punctuation">(</span><span class="token parameter">value</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">return</span> <span class="token punctuation">(</span>
        value <span class="token operator">===</span> <span class="token keyword">undefined</span> <span class="token operator">||</span>
        value <span class="token operator">===</span> <span class="token keyword">null</span> <span class="token operator">||</span>
        <span class="token punctuation">(</span><span class="token keyword">typeof</span> value <span class="token operator">==</span> <span class="token string">&quot;object&quot;</span> <span class="token operator">&amp;&amp;</span> Object<span class="token punctuation">.</span><span class="token function">keys</span><span class="token punctuation">(</span>value<span class="token punctuation">)</span><span class="token punctuation">.</span>length <span class="token operator">==</span> <span class="token number">0</span><span class="token punctuation">)</span> <span class="token operator">||</span>
        <span class="token punctuation">(</span><span class="token keyword">typeof</span> value <span class="token operator">==</span> <span class="token string">&quot;string&quot;</span> <span class="token operator">&amp;&amp;</span> value<span class="token punctuation">.</span><span class="token function">trim</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">.</span>length <span class="token operator">==</span> <span class="token number">0</span><span class="token punctuation">)</span>
    <span class="token punctuation">)</span>
<span class="token punctuation">}</span>
</code></pre></div><hr> <h2 id="获取浏览器信息"><a href="#获取浏览器信息" class="header-anchor">#</a> 获取浏览器信息</h2> <div class="language-javascript extra-class"><pre class="language-javascript"><code><span class="token keyword">function</span> <span class="token function">getExplorerInfo</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">let</span> t <span class="token operator">=</span> navigator<span class="token punctuation">.</span>userAgent<span class="token punctuation">.</span><span class="token function">toLowerCase</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token keyword">return</span> <span class="token number">0</span> <span class="token operator">&lt;=</span> t<span class="token punctuation">.</span><span class="token function">indexOf</span><span class="token punctuation">(</span><span class="token string">&quot;msie&quot;</span><span class="token punctuation">)</span> <span class="token operator">?</span> <span class="token punctuation">{</span> <span class="token comment">//ie &lt; 11</span>
        type<span class="token operator">:</span> <span class="token string">&quot;IE&quot;</span><span class="token punctuation">,</span>
        version<span class="token operator">:</span> <span class="token function">Number</span><span class="token punctuation">(</span>t<span class="token punctuation">.</span><span class="token function">match</span><span class="token punctuation">(</span><span class="token regex"><span class="token regex-delimiter">/</span><span class="token regex-source language-regex">msie ([d]+)</span><span class="token regex-delimiter">/</span></span><span class="token punctuation">)</span><span class="token punctuation">[</span><span class="token number">1</span><span class="token punctuation">]</span><span class="token punctuation">)</span>
    <span class="token punctuation">}</span> <span class="token operator">:</span> <span class="token operator">!</span><span class="token operator">!</span>t<span class="token punctuation">.</span><span class="token function">match</span><span class="token punctuation">(</span><span class="token regex"><span class="token regex-delimiter">/</span><span class="token regex-source language-regex">trident</span><span class="token regex-delimiter">/</span></span><span class="token punctuation">.</span><span class="token operator">+</span><span class="token operator">?</span>rv<span class="token operator">:</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">[</span>d<span class="token punctuation">.</span><span class="token punctuation">]</span><span class="token operator">+</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token operator">/</span><span class="token punctuation">)</span> <span class="token operator">?</span> <span class="token punctuation">{</span> <span class="token comment">// ie 11</span>
        type<span class="token operator">:</span> <span class="token string">&quot;IE&quot;</span><span class="token punctuation">,</span>
        version<span class="token operator">:</span> <span class="token number">11</span>
    <span class="token punctuation">}</span> <span class="token operator">:</span> <span class="token number">0</span> <span class="token operator">&lt;=</span> t<span class="token punctuation">.</span><span class="token function">indexOf</span><span class="token punctuation">(</span><span class="token string">&quot;edge&quot;</span><span class="token punctuation">)</span> <span class="token operator">?</span> <span class="token punctuation">{</span>
        type<span class="token operator">:</span> <span class="token string">&quot;Edge&quot;</span><span class="token punctuation">,</span>
        version<span class="token operator">:</span> <span class="token function">Number</span><span class="token punctuation">(</span>t<span class="token punctuation">.</span><span class="token function">match</span><span class="token punctuation">(</span><span class="token operator">/</span>edge<span class="token operator">/</span><span class="token punctuation">(</span><span class="token punctuation">[</span>d<span class="token punctuation">]</span><span class="token operator">+</span><span class="token punctuation">)</span><span class="token operator">/</span><span class="token punctuation">)</span><span class="token punctuation">[</span><span class="token number">1</span><span class="token punctuation">]</span><span class="token punctuation">)</span>
    <span class="token punctuation">}</span> <span class="token operator">:</span> <span class="token number">0</span> <span class="token operator">&lt;=</span> t<span class="token punctuation">.</span><span class="token function">indexOf</span><span class="token punctuation">(</span><span class="token string">&quot;firefox&quot;</span><span class="token punctuation">)</span> <span class="token operator">?</span> <span class="token punctuation">{</span>
        type<span class="token operator">:</span> <span class="token string">&quot;Firefox&quot;</span><span class="token punctuation">,</span>
        version<span class="token operator">:</span> <span class="token function">Number</span><span class="token punctuation">(</span>t<span class="token punctuation">.</span><span class="token function">match</span><span class="token punctuation">(</span><span class="token operator">/</span>firefox<span class="token operator">/</span><span class="token punctuation">(</span><span class="token punctuation">[</span>d<span class="token punctuation">]</span><span class="token operator">+</span><span class="token punctuation">)</span><span class="token operator">/</span><span class="token punctuation">)</span><span class="token punctuation">[</span><span class="token number">1</span><span class="token punctuation">]</span><span class="token punctuation">)</span>
    <span class="token punctuation">}</span> <span class="token operator">:</span> <span class="token number">0</span> <span class="token operator">&lt;=</span> t<span class="token punctuation">.</span><span class="token function">indexOf</span><span class="token punctuation">(</span><span class="token string">&quot;chrome&quot;</span><span class="token punctuation">)</span> <span class="token operator">?</span> <span class="token punctuation">{</span>
        type<span class="token operator">:</span> <span class="token string">&quot;Chrome&quot;</span><span class="token punctuation">,</span>
        version<span class="token operator">:</span> <span class="token function">Number</span><span class="token punctuation">(</span>t<span class="token punctuation">.</span><span class="token function">match</span><span class="token punctuation">(</span><span class="token operator">/</span>chrome<span class="token operator">/</span><span class="token punctuation">(</span><span class="token punctuation">[</span>d<span class="token punctuation">]</span><span class="token operator">+</span><span class="token punctuation">)</span><span class="token operator">/</span><span class="token punctuation">)</span><span class="token punctuation">[</span><span class="token number">1</span><span class="token punctuation">]</span><span class="token punctuation">)</span>
    <span class="token punctuation">}</span> <span class="token operator">:</span> <span class="token number">0</span> <span class="token operator">&lt;=</span> t<span class="token punctuation">.</span><span class="token function">indexOf</span><span class="token punctuation">(</span><span class="token string">&quot;opera&quot;</span><span class="token punctuation">)</span> <span class="token operator">?</span> <span class="token punctuation">{</span>
        type<span class="token operator">:</span> <span class="token string">&quot;Opera&quot;</span><span class="token punctuation">,</span>
        version<span class="token operator">:</span> <span class="token function">Number</span><span class="token punctuation">(</span>t<span class="token punctuation">.</span><span class="token function">match</span><span class="token punctuation">(</span><span class="token regex"><span class="token regex-delimiter">/</span><span class="token regex-source language-regex">opera.([d]+)</span><span class="token regex-delimiter">/</span></span><span class="token punctuation">)</span><span class="token punctuation">[</span><span class="token number">1</span><span class="token punctuation">]</span><span class="token punctuation">)</span>
    <span class="token punctuation">}</span> <span class="token operator">:</span> <span class="token number">0</span> <span class="token operator">&lt;=</span> t<span class="token punctuation">.</span><span class="token function">indexOf</span><span class="token punctuation">(</span><span class="token string">&quot;Safari&quot;</span><span class="token punctuation">)</span> <span class="token operator">?</span> <span class="token punctuation">{</span>
        type<span class="token operator">:</span> <span class="token string">&quot;Safari&quot;</span><span class="token punctuation">,</span>
        version<span class="token operator">:</span> <span class="token function">Number</span><span class="token punctuation">(</span>t<span class="token punctuation">.</span><span class="token function">match</span><span class="token punctuation">(</span><span class="token operator">/</span>version<span class="token operator">/</span><span class="token punctuation">(</span><span class="token punctuation">[</span>d<span class="token punctuation">]</span><span class="token operator">+</span><span class="token punctuation">)</span><span class="token operator">/</span><span class="token punctuation">)</span><span class="token punctuation">[</span><span class="token number">1</span><span class="token punctuation">]</span><span class="token punctuation">)</span>
    <span class="token punctuation">}</span> <span class="token operator">:</span> <span class="token punctuation">{</span>
        type<span class="token operator">:</span> t<span class="token punctuation">,</span>
        version<span class="token operator">:</span> <span class="token operator">-</span><span class="token number">1</span>
    <span class="token punctuation">}</span>
<span class="token punctuation">}</span>
</code></pre></div><hr> <h2 id="禁止键盘某些事件"><a href="#禁止键盘某些事件" class="header-anchor">#</a> 禁止键盘某些事件</h2> <div class="language-javascript extra-class"><pre class="language-javascript"><code>document<span class="token punctuation">.</span><span class="token function">addEventListener</span><span class="token punctuation">(</span><span class="token string">'keydown'</span><span class="token punctuation">,</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">event</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
    <span class="token keyword">return</span> <span class="token operator">!</span><span class="token punctuation">(</span>
        <span class="token number">112</span> <span class="token operator">==</span> event<span class="token punctuation">.</span>keyCode <span class="token operator">||</span> <span class="token comment">//F1</span>
        <span class="token number">123</span> <span class="token operator">==</span> event<span class="token punctuation">.</span>keyCode <span class="token operator">||</span> <span class="token comment">//F12</span>
        event<span class="token punctuation">.</span>ctrlKey <span class="token operator">&amp;&amp;</span> <span class="token number">82</span> <span class="token operator">==</span> event<span class="token punctuation">.</span>keyCode <span class="token operator">||</span> <span class="token comment">//ctrl + R</span>
        event<span class="token punctuation">.</span>ctrlKey <span class="token operator">&amp;&amp;</span> <span class="token number">78</span> <span class="token operator">==</span> event<span class="token punctuation">.</span>keyCode <span class="token operator">||</span> <span class="token comment">//ctrl + N</span>
        event<span class="token punctuation">.</span>shiftKey <span class="token operator">&amp;&amp;</span> <span class="token number">121</span> <span class="token operator">==</span> event<span class="token punctuation">.</span>keyCode <span class="token operator">||</span> <span class="token comment">//shift + F10</span>
        event<span class="token punctuation">.</span>altKey <span class="token operator">&amp;&amp;</span> <span class="token number">115</span> <span class="token operator">==</span> event<span class="token punctuation">.</span>keyCode <span class="token operator">||</span> <span class="token comment">//alt + F4</span>
        <span class="token string">&quot;A&quot;</span> <span class="token operator">==</span> event<span class="token punctuation">.</span>srcElement<span class="token punctuation">.</span>tagName <span class="token operator">&amp;&amp;</span> event<span class="token punctuation">.</span>shiftKey <span class="token comment">//shift + 点击a标签</span>
    <span class="token punctuation">)</span> <span class="token operator">||</span> <span class="token punctuation">(</span>event<span class="token punctuation">.</span>returnValue <span class="token operator">=</span> <span class="token boolean">false</span><span class="token punctuation">)</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre></div><hr> <h2 id="禁止右键、选择、复制"><a href="#禁止右键、选择、复制" class="header-anchor">#</a> 禁止右键、选择、复制</h2> <div class="language-javascript extra-class"><pre class="language-javascript"><code><span class="token punctuation">[</span><span class="token string">'contextmenu'</span><span class="token punctuation">,</span> <span class="token string">'selectstart'</span><span class="token punctuation">,</span> <span class="token string">'copy'</span><span class="token punctuation">]</span><span class="token punctuation">.</span><span class="token function">forEach</span><span class="token punctuation">(</span><span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">ev</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
    document<span class="token punctuation">.</span><span class="token function">addEventListener</span><span class="token punctuation">(</span>ev<span class="token punctuation">,</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">event</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
        <span class="token keyword">return</span> event<span class="token punctuation">.</span>returnValue <span class="token operator">=</span> <span class="token boolean">false</span>
    <span class="token punctuation">}</span><span class="token punctuation">)</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre></div><hr> <h2 id="性能分析"><a href="#性能分析" class="header-anchor">#</a> 性能分析</h2> <div class="language-javascript extra-class"><pre class="language-javascript"><code>window<span class="token punctuation">.</span><span class="token function-variable function">onload</span> <span class="token operator">=</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
    <span class="token function">setTimeout</span><span class="token punctuation">(</span><span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
        <span class="token keyword">let</span> t <span class="token operator">=</span> performance<span class="token punctuation">.</span>timing
        console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'DNS查询耗时 ：'</span> <span class="token operator">+</span> <span class="token punctuation">(</span>t<span class="token punctuation">.</span>domainLookupEnd <span class="token operator">-</span> t<span class="token punctuation">.</span>domainLookupStart<span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">toFixed</span><span class="token punctuation">(</span><span class="token number">0</span><span class="token punctuation">)</span><span class="token punctuation">)</span>
        console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'TCP链接耗时 ：'</span> <span class="token operator">+</span> <span class="token punctuation">(</span>t<span class="token punctuation">.</span>connectEnd <span class="token operator">-</span> t<span class="token punctuation">.</span>connectStart<span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">toFixed</span><span class="token punctuation">(</span><span class="token number">0</span><span class="token punctuation">)</span><span class="token punctuation">)</span>
        console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'request请求耗时 ：'</span> <span class="token operator">+</span> <span class="token punctuation">(</span>t<span class="token punctuation">.</span>responseEnd <span class="token operator">-</span> t<span class="token punctuation">.</span>responseStart<span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">toFixed</span><span class="token punctuation">(</span><span class="token number">0</span><span class="token punctuation">)</span><span class="token punctuation">)</span>
        console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'解析dom树耗时 ：'</span> <span class="token operator">+</span> <span class="token punctuation">(</span>t<span class="token punctuation">.</span>domComplete <span class="token operator">-</span> t<span class="token punctuation">.</span>domInteractive<span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">toFixed</span><span class="token punctuation">(</span><span class="token number">0</span><span class="token punctuation">)</span><span class="token punctuation">)</span>
        console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'白屏时间 ：'</span> <span class="token operator">+</span> <span class="token punctuation">(</span>t<span class="token punctuation">.</span>responseStart <span class="token operator">-</span> t<span class="token punctuation">.</span>navigationStart<span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">toFixed</span><span class="token punctuation">(</span><span class="token number">0</span><span class="token punctuation">)</span><span class="token punctuation">)</span>
        console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'domready时间 ：'</span> <span class="token operator">+</span> <span class="token punctuation">(</span>t<span class="token punctuation">.</span>domContentLoadedEventEnd <span class="token operator">-</span> t<span class="token punctuation">.</span>navigationStart<span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">toFixed</span><span class="token punctuation">(</span><span class="token number">0</span><span class="token punctuation">)</span><span class="token punctuation">)</span>
        console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'onload时间 ：'</span> <span class="token operator">+</span> <span class="token punctuation">(</span>t<span class="token punctuation">.</span>loadEventEnd <span class="token operator">-</span> t<span class="token punctuation">.</span>navigationStart<span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">toFixed</span><span class="token punctuation">(</span><span class="token number">0</span><span class="token punctuation">)</span><span class="token punctuation">)</span>

        <span class="token keyword">if</span><span class="token punctuation">(</span>t <span class="token operator">=</span> performance<span class="token punctuation">.</span>memory<span class="token punctuation">)</span><span class="token punctuation">{</span>
            console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'js内存使用占比 ：'</span> <span class="token operator">+</span> <span class="token punctuation">(</span>t<span class="token punctuation">.</span>usedJSHeapSize <span class="token operator">/</span> t<span class="token punctuation">.</span>totalJSHeapSize <span class="token operator">*</span> <span class="token number">100</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">toFixed</span><span class="token punctuation">(</span><span class="token number">2</span><span class="token punctuation">)</span> <span class="token operator">+</span> <span class="token string">'%'</span><span class="token punctuation">)</span>
        <span class="token punctuation">}</span>
    <span class="token punctuation">}</span><span class="token punctuation">)</span>
<span class="token punctuation">}</span>
</code></pre></div><hr> <h2 id="是否为pc浏览器"><a href="#是否为pc浏览器" class="header-anchor">#</a> 是否为PC浏览器</h2> <div class="language-javascript extra-class"><pre class="language-javascript"><code><span class="token keyword">function</span> <span class="token function">isPCBroswer</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
	<span class="token keyword">let</span> e <span class="token operator">=</span> navigator<span class="token punctuation">.</span>userAgent<span class="token punctuation">.</span><span class="token function">toLowerCase</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
		<span class="token punctuation">,</span> t <span class="token operator">=</span> <span class="token string">&quot;ipad&quot;</span> <span class="token operator">==</span> e<span class="token punctuation">.</span><span class="token function">match</span><span class="token punctuation">(</span><span class="token regex"><span class="token regex-delimiter">/</span><span class="token regex-source language-regex">ipad</span><span class="token regex-delimiter">/</span><span class="token regex-flags">i</span></span><span class="token punctuation">)</span>
		<span class="token punctuation">,</span> i <span class="token operator">=</span> <span class="token string">&quot;iphone&quot;</span> <span class="token operator">==</span> e<span class="token punctuation">.</span><span class="token function">match</span><span class="token punctuation">(</span><span class="token regex"><span class="token regex-delimiter">/</span><span class="token regex-source language-regex">iphone</span><span class="token regex-delimiter">/</span><span class="token regex-flags">i</span></span><span class="token punctuation">)</span>
		<span class="token punctuation">,</span> r <span class="token operator">=</span> <span class="token string">&quot;midp&quot;</span> <span class="token operator">==</span> e<span class="token punctuation">.</span><span class="token function">match</span><span class="token punctuation">(</span><span class="token regex"><span class="token regex-delimiter">/</span><span class="token regex-source language-regex">midp</span><span class="token regex-delimiter">/</span><span class="token regex-flags">i</span></span><span class="token punctuation">)</span>
		<span class="token punctuation">,</span> n <span class="token operator">=</span> <span class="token string">&quot;rv:1.2.3.4&quot;</span> <span class="token operator">==</span> e<span class="token punctuation">.</span><span class="token function">match</span><span class="token punctuation">(</span><span class="token regex"><span class="token regex-delimiter">/</span><span class="token regex-source language-regex">rv:1.2.3.4</span><span class="token regex-delimiter">/</span><span class="token regex-flags">i</span></span><span class="token punctuation">)</span>
		<span class="token punctuation">,</span> a <span class="token operator">=</span> <span class="token string">&quot;ucweb&quot;</span> <span class="token operator">==</span> e<span class="token punctuation">.</span><span class="token function">match</span><span class="token punctuation">(</span><span class="token regex"><span class="token regex-delimiter">/</span><span class="token regex-source language-regex">ucweb</span><span class="token regex-delimiter">/</span><span class="token regex-flags">i</span></span><span class="token punctuation">)</span>
		<span class="token punctuation">,</span> o <span class="token operator">=</span> <span class="token string">&quot;android&quot;</span> <span class="token operator">==</span> e<span class="token punctuation">.</span><span class="token function">match</span><span class="token punctuation">(</span><span class="token regex"><span class="token regex-delimiter">/</span><span class="token regex-source language-regex">android</span><span class="token regex-delimiter">/</span><span class="token regex-flags">i</span></span><span class="token punctuation">)</span>
		<span class="token punctuation">,</span> s <span class="token operator">=</span> <span class="token string">&quot;windows ce&quot;</span> <span class="token operator">==</span> e<span class="token punctuation">.</span><span class="token function">match</span><span class="token punctuation">(</span><span class="token regex"><span class="token regex-delimiter">/</span><span class="token regex-source language-regex">windows ce</span><span class="token regex-delimiter">/</span><span class="token regex-flags">i</span></span><span class="token punctuation">)</span>
		<span class="token punctuation">,</span> l <span class="token operator">=</span> <span class="token string">&quot;windows mobile&quot;</span> <span class="token operator">==</span> e<span class="token punctuation">.</span><span class="token function">match</span><span class="token punctuation">(</span><span class="token regex"><span class="token regex-delimiter">/</span><span class="token regex-source language-regex">windows mobile</span><span class="token regex-delimiter">/</span><span class="token regex-flags">i</span></span><span class="token punctuation">)</span><span class="token punctuation">;</span>
	<span class="token keyword">return</span> <span class="token operator">!</span><span class="token punctuation">(</span>t <span class="token operator">||</span> i <span class="token operator">||</span> r <span class="token operator">||</span> n <span class="token operator">||</span> a <span class="token operator">||</span> o <span class="token operator">||</span> s <span class="token operator">||</span> l<span class="token punctuation">)</span>
<span class="token punctuation">}</span>
</code></pre></div><hr> <h2 id="时间格式化"><a href="#时间格式化" class="header-anchor">#</a> 时间格式化</h2> <div class="language-javascript extra-class"><pre class="language-javascript"><code><span class="token keyword">function</span> <span class="token function">dateFormater</span><span class="token punctuation">(</span><span class="token parameter">formater<span class="token punctuation">,</span> t</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
	<span class="token keyword">let</span> date <span class="token operator">=</span> t <span class="token operator">?</span> <span class="token keyword">new</span> <span class="token class-name">Date</span><span class="token punctuation">(</span>t<span class="token punctuation">)</span> <span class="token operator">:</span> <span class="token keyword">new</span> <span class="token class-name">Date</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
		<span class="token constant">Y</span> <span class="token operator">=</span> date<span class="token punctuation">.</span><span class="token function">getFullYear</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">+</span> <span class="token string">''</span><span class="token punctuation">,</span>
		<span class="token constant">M</span> <span class="token operator">=</span> date<span class="token punctuation">.</span><span class="token function">getMonth</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">+</span> <span class="token number">1</span><span class="token punctuation">,</span>
		<span class="token constant">D</span> <span class="token operator">=</span> date<span class="token punctuation">.</span><span class="token function">getDate</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
		<span class="token constant">H</span> <span class="token operator">=</span> date<span class="token punctuation">.</span><span class="token function">getHours</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
		m <span class="token operator">=</span> date<span class="token punctuation">.</span><span class="token function">getMinutes</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
		s <span class="token operator">=</span> date<span class="token punctuation">.</span><span class="token function">getSeconds</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
	<span class="token keyword">return</span> formater<span class="token punctuation">.</span><span class="token function">replace</span><span class="token punctuation">(</span><span class="token regex"><span class="token regex-delimiter">/</span><span class="token regex-source language-regex">YYYY|yyyy</span><span class="token regex-delimiter">/</span><span class="token regex-flags">g</span></span><span class="token punctuation">,</span><span class="token constant">Y</span><span class="token punctuation">)</span>
		<span class="token punctuation">.</span><span class="token function">replace</span><span class="token punctuation">(</span><span class="token regex"><span class="token regex-delimiter">/</span><span class="token regex-source language-regex">YY|yy</span><span class="token regex-delimiter">/</span><span class="token regex-flags">g</span></span><span class="token punctuation">,</span><span class="token constant">Y</span><span class="token punctuation">.</span><span class="token function">substr</span><span class="token punctuation">(</span><span class="token number">2</span><span class="token punctuation">,</span><span class="token number">2</span><span class="token punctuation">)</span><span class="token punctuation">)</span>
		<span class="token punctuation">.</span><span class="token function">replace</span><span class="token punctuation">(</span><span class="token regex"><span class="token regex-delimiter">/</span><span class="token regex-source language-regex">MM</span><span class="token regex-delimiter">/</span><span class="token regex-flags">g</span></span><span class="token punctuation">,</span><span class="token punctuation">(</span><span class="token constant">M</span><span class="token operator">&lt;</span><span class="token number">10</span><span class="token operator">?</span><span class="token string">'0'</span><span class="token operator">:</span><span class="token string">''</span><span class="token punctuation">)</span> <span class="token operator">+</span> <span class="token constant">M</span><span class="token punctuation">)</span>
		<span class="token punctuation">.</span><span class="token function">replace</span><span class="token punctuation">(</span><span class="token regex"><span class="token regex-delimiter">/</span><span class="token regex-source language-regex">DD</span><span class="token regex-delimiter">/</span><span class="token regex-flags">g</span></span><span class="token punctuation">,</span><span class="token punctuation">(</span><span class="token constant">D</span><span class="token operator">&lt;</span><span class="token number">10</span><span class="token operator">?</span><span class="token string">'0'</span><span class="token operator">:</span><span class="token string">''</span><span class="token punctuation">)</span> <span class="token operator">+</span> <span class="token constant">D</span><span class="token punctuation">)</span>
		<span class="token punctuation">.</span><span class="token function">replace</span><span class="token punctuation">(</span><span class="token regex"><span class="token regex-delimiter">/</span><span class="token regex-source language-regex">HH|hh</span><span class="token regex-delimiter">/</span><span class="token regex-flags">g</span></span><span class="token punctuation">,</span><span class="token punctuation">(</span><span class="token constant">H</span><span class="token operator">&lt;</span><span class="token number">10</span><span class="token operator">?</span><span class="token string">'0'</span><span class="token operator">:</span><span class="token string">''</span><span class="token punctuation">)</span> <span class="token operator">+</span> <span class="token constant">H</span><span class="token punctuation">)</span>
		<span class="token punctuation">.</span><span class="token function">replace</span><span class="token punctuation">(</span><span class="token regex"><span class="token regex-delimiter">/</span><span class="token regex-source language-regex">mm</span><span class="token regex-delimiter">/</span><span class="token regex-flags">g</span></span><span class="token punctuation">,</span><span class="token punctuation">(</span>m<span class="token operator">&lt;</span><span class="token number">10</span><span class="token operator">?</span><span class="token string">'0'</span><span class="token operator">:</span><span class="token string">''</span><span class="token punctuation">)</span> <span class="token operator">+</span> m<span class="token punctuation">)</span>
		<span class="token punctuation">.</span><span class="token function">replace</span><span class="token punctuation">(</span><span class="token regex"><span class="token regex-delimiter">/</span><span class="token regex-source language-regex">ss</span><span class="token regex-delimiter">/</span><span class="token regex-flags">g</span></span><span class="token punctuation">,</span><span class="token punctuation">(</span>s<span class="token operator">&lt;</span><span class="token number">10</span><span class="token operator">?</span><span class="token string">'0'</span><span class="token operator">:</span><span class="token string">''</span><span class="token punctuation">)</span> <span class="token operator">+</span> s<span class="token punctuation">)</span>
<span class="token punctuation">}</span>
<span class="token comment">// dateFormater('YYYY-MM-DD HH:mm', t)</span>
<span class="token comment">// 2019-08-05 09:45</span>
</code></pre></div><hr> <h2 id="获取url参数"><a href="#获取url参数" class="header-anchor">#</a> 获取URL参数</h2> <div class="language-javascript extra-class"><pre class="language-javascript"><code><span class="token keyword">function</span> <span class="token function">GetUrlParam</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
	<span class="token keyword">let</span> url <span class="token operator">=</span> document<span class="token punctuation">.</span>location<span class="token punctuation">.</span><span class="token function">toString</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
	<span class="token keyword">let</span> arrObj <span class="token operator">=</span> url<span class="token punctuation">.</span><span class="token function">split</span><span class="token punctuation">(</span><span class="token string">&quot;?&quot;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
	<span class="token keyword">let</span> params <span class="token operator">=</span> Object<span class="token punctuation">.</span><span class="token function">create</span><span class="token punctuation">(</span><span class="token keyword">null</span><span class="token punctuation">)</span>
	<span class="token keyword">if</span> <span class="token punctuation">(</span>arrObj<span class="token punctuation">.</span>length <span class="token operator">&gt;</span> <span class="token number">1</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
		arrObj <span class="token operator">=</span> arrObj<span class="token punctuation">[</span><span class="token number">1</span><span class="token punctuation">]</span><span class="token punctuation">.</span><span class="token function">split</span><span class="token punctuation">(</span><span class="token string">&quot;&amp;&quot;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
		arrObj<span class="token punctuation">.</span><span class="token function">forEach</span><span class="token punctuation">(</span><span class="token parameter">item</span><span class="token operator">=&gt;</span><span class="token punctuation">{</span>
			item <span class="token operator">=</span> item<span class="token punctuation">.</span><span class="token function">split</span><span class="token punctuation">(</span><span class="token string">&quot;=&quot;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
			params<span class="token punctuation">[</span>item<span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">]</span><span class="token punctuation">]</span> <span class="token operator">=</span> item<span class="token punctuation">[</span><span class="token number">1</span><span class="token punctuation">]</span>
		<span class="token punctuation">}</span><span class="token punctuation">)</span>
	<span class="token punctuation">}</span>
	<span class="token keyword">return</span> params<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre></div><hr> <h2 id="随机数获取"><a href="#随机数获取" class="header-anchor">#</a> 随机数获取</h2> <div class="language-javascript extra-class"><pre class="language-javascript"><code><span class="token keyword">function</span> <span class="token function">random</span><span class="token punctuation">(</span><span class="token parameter">lower<span class="token punctuation">,</span> upper</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
	lower <span class="token operator">=</span> <span class="token operator">+</span>lower <span class="token operator">||</span> <span class="token number">0</span>
	upper <span class="token operator">=</span> <span class="token operator">+</span>upper <span class="token operator">||</span> <span class="token number">0</span>
	<span class="token keyword">return</span> Math<span class="token punctuation">.</span><span class="token function">random</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">*</span> <span class="token punctuation">(</span>upper <span class="token operator">-</span> lower<span class="token punctuation">)</span> <span class="token operator">+</span> lower<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre></div><hr> <h2 id="上传图片"><a href="#上传图片" class="header-anchor">#</a> 上传图片</h2> <div class="language-javascript extra-class"><pre class="language-javascript"><code>document<span class="token punctuation">.</span><span class="token function">querySelector</span><span class="token punctuation">(</span><span class="token string">&quot;input[type=file]&quot;</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function-variable function">onchange</span><span class="token operator">=</span><span class="token parameter">e</span><span class="token operator">=&gt;</span><span class="token punctuation">{</span>
	<span class="token keyword">let</span> files <span class="token operator">=</span> e<span class="token punctuation">.</span>currentTarget<span class="token punctuation">.</span>files<span class="token punctuation">;</span>
    <span class="token keyword">let</span> reader <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">FileReader</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    reader<span class="token punctuation">.</span><span class="token function">readAsDataURL</span><span class="token punctuation">(</span>files<span class="token punctuation">)</span><span class="token punctuation">;</span>
    reader<span class="token punctuation">.</span><span class="token function-variable function">onload</span> <span class="token operator">=</span> <span class="token parameter">e</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
        console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>e<span class="token punctuation">.</span>target<span class="token punctuation">.</span>result<span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span>
<span class="token punctuation">}</span>
</code></pre></div><hr> <h2 id="判断小数是否相等"><a href="#判断小数是否相等" class="header-anchor">#</a> 判断小数是否相等</h2> <div class="language-javascript extra-class"><pre class="language-javascript"><code><span class="token keyword">function</span> <span class="token function">epsEqu1</span><span class="token punctuation">(</span><span class="token parameter">x<span class="token punctuation">,</span>y</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>  
  <span class="token keyword">return</span> Math<span class="token punctuation">.</span><span class="token function">abs</span><span class="token punctuation">(</span>x <span class="token operator">-</span> y<span class="token punctuation">)</span> <span class="token operator">&lt;</span> Math<span class="token punctuation">.</span><span class="token function">pow</span><span class="token punctuation">(</span><span class="token number">2</span><span class="token punctuation">,</span> <span class="token operator">-</span><span class="token number">52</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token keyword">function</span> <span class="token function">epsEqu2</span><span class="token punctuation">(</span><span class="token parameter">x<span class="token punctuation">,</span>y</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>  
  <span class="token keyword">return</span> Math<span class="token punctuation">.</span><span class="token function">abs</span><span class="token punctuation">(</span>x <span class="token operator">-</span> y<span class="token punctuation">)</span> <span class="token operator">&lt;</span> Number<span class="token punctuation">.</span><span class="token constant">EPSILON</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token comment">// 举例</span>
<span class="token number">0.1</span> <span class="token operator">+</span> <span class="token number">0.2</span> <span class="token operator">===</span> <span class="token number">0.3</span> <span class="token comment">// false</span>
<span class="token function">epsEqu1</span><span class="token punctuation">(</span><span class="token number">0.1</span> <span class="token operator">+</span> <span class="token number">0.2</span><span class="token punctuation">,</span> <span class="token number">0.3</span><span class="token punctuation">)</span> <span class="token comment">// true</span>
<span class="token function">epsEqu2</span><span class="token punctuation">(</span><span class="token number">0.1</span> <span class="token operator">+</span> <span class="token number">0.2</span><span class="token punctuation">,</span> <span class="token number">0.3</span><span class="token punctuation">)</span> <span class="token comment">// true</span>
</code></pre></div><hr> <h2 id="精确小数"><a href="#精确小数" class="header-anchor">#</a> 精确小数</h2> <div class="language-javascript extra-class"><pre class="language-javascript"><code><span class="token comment">// es6</span>
<span class="token keyword">const</span> <span class="token function-variable function">RoundNum</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token parameter">num<span class="token punctuation">,</span> decimal</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> Math<span class="token punctuation">.</span><span class="token function">round</span><span class="token punctuation">(</span>num <span class="token operator">*</span> <span class="token number">10</span> <span class="token operator">**</span> decimal<span class="token punctuation">)</span> <span class="token operator">/</span> <span class="token number">10</span> <span class="token operator">**</span> decimal<span class="token punctuation">;</span>

<span class="token comment">// es5</span>
<span class="token keyword">function</span> <span class="token function">RoundNum</span><span class="token punctuation">(</span><span class="token parameter">num<span class="token punctuation">,</span> decimal</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
    <span class="token keyword">return</span> Math<span class="token punctuation">.</span><span class="token function">round</span><span class="token punctuation">(</span>num <span class="token operator">*</span> Math<span class="token punctuation">.</span><span class="token function">pow</span><span class="token punctuation">(</span><span class="token number">10</span><span class="token punctuation">,</span>decimal<span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token operator">/</span> Math<span class="token punctuation">.</span><span class="token function">pow</span><span class="token punctuation">(</span><span class="token number">10</span><span class="token punctuation">,</span>decimal<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>

</code></pre></div><hr> <h2 id="requestanimframe-兼容"><a href="#requestanimframe-兼容" class="header-anchor">#</a> requestAnimFrame 兼容</h2> <div class="language-javascript extra-class"><pre class="language-javascript"><code>window<span class="token punctuation">.</span>requestAnimFrame <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">return</span> window<span class="token punctuation">.</span>requestAnimationFrame <span class="token operator">||</span> window<span class="token punctuation">.</span>webkitRequestAnimationFrame <span class="token operator">||</span> window<span class="token punctuation">.</span>mozRequestAnimationFrame <span class="token operator">||</span> window<span class="token punctuation">.</span>oRequestAnimationFrame <span class="token operator">||</span> window<span class="token punctuation">.</span>msRequestAnimationFrame <span class="token operator">||</span>
        <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">callback<span class="token punctuation">,</span>element</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
            <span class="token keyword">return</span> window<span class="token punctuation">.</span><span class="token function">setTimeout</span><span class="token punctuation">(</span>callback<span class="token punctuation">,</span> <span class="token number">1000</span> <span class="token operator">/</span> <span class="token number">60</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
        <span class="token punctuation">}</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre></div><hr> <h2 id="动态创建script标签"><a href="#动态创建script标签" class="header-anchor">#</a> 动态创建script标签</h2> <div class="language-javascript extra-class"><pre class="language-javascript"><code><span class="token keyword">function</span> <span class="token function">loadScript</span><span class="token punctuation">(</span><span class="token parameter">url<span class="token punctuation">,</span> func</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">var</span> head <span class="token operator">=</span> document<span class="token punctuation">.</span>head <span class="token operator">||</span> document<span class="token punctuation">.</span><span class="token function">getElementByTagName</span><span class="token punctuation">(</span><span class="token string">'head'</span><span class="token punctuation">)</span><span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">]</span><span class="token punctuation">;</span>
    <span class="token keyword">var</span> script <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">createElement</span><span class="token punctuation">(</span><span class="token string">'script'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    script<span class="token punctuation">.</span>src <span class="token operator">=</span> url<span class="token punctuation">;</span>
    script<span class="token punctuation">.</span>onload <span class="token operator">=</span> script<span class="token punctuation">.</span><span class="token function-variable function">onreadystatechange</span> <span class="token operator">=</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
        <span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token operator">!</span><span class="token keyword">this</span><span class="token punctuation">.</span>readyState <span class="token operator">||</span> <span class="token keyword">this</span><span class="token punctuation">.</span>readyState <span class="token operator">==</span> <span class="token string">'loaded'</span> <span class="token operator">||</span> <span class="token keyword">this</span><span class="token punctuation">.</span>readyState <span class="token operator">==</span> <span class="token string">'complete'</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
            <span class="token function">func</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
            script<span class="token punctuation">.</span>onload <span class="token operator">=</span> script<span class="token punctuation">.</span>onreadystatechange <span class="token operator">=</span> <span class="token keyword">null</span><span class="token punctuation">;</span>
        <span class="token punctuation">}</span>
    <span class="token punctuation">}</span><span class="token punctuation">;</span>
    head<span class="token punctuation">.</span><span class="token function">appendChild</span><span class="token punctuation">(</span>script<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre></div><hr> <h2 id="debugger反调试"><a href="#debugger反调试" class="header-anchor">#</a> debugger反调试</h2> <div class="language-javascript extra-class"><pre class="language-javascript"><code><span class="token comment">// 法1：</span>
<span class="token punctuation">(</span><span class="token keyword">function</span> <span class="token function">anonymous</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span><span class="token keyword">debugger</span><span class="token punctuation">}</span><span class="token punctuation">)</span>
<span class="token comment">// 法2：</span>
<span class="token punctuation">(</span><span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">var</span> a <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Date</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> 
    <span class="token keyword">debugger</span><span class="token punctuation">;</span>
    <span class="token keyword">return</span> <span class="token keyword">new</span> <span class="token class-name">Date</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">-</span> a <span class="token operator">&gt;</span> <span class="token number">100</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span>
</code></pre></div><hr> <h2 id="base64转blob"><a href="#base64转blob" class="header-anchor">#</a> Base64转Blob</h2> <div class="language-javascript extra-class"><pre class="language-javascript"><code><span class="token keyword">function</span> <span class="token function">dataUrlToBlob</span><span class="token punctuation">(</span><span class="token parameter">dataUrl</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
	<span class="token keyword">var</span> arr <span class="token operator">=</span> dataUrl<span class="token punctuation">.</span><span class="token function">split</span><span class="token punctuation">(</span><span class="token string">','</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
        mime <span class="token operator">=</span> arr<span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">]</span><span class="token punctuation">.</span><span class="token function">match</span><span class="token punctuation">(</span><span class="token regex"><span class="token regex-delimiter">/</span><span class="token regex-source language-regex">:(.*?);</span><span class="token regex-delimiter">/</span></span><span class="token punctuation">)</span><span class="token punctuation">[</span><span class="token number">1</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
        bstr <span class="token operator">=</span> <span class="token function">atob</span><span class="token punctuation">(</span>arr<span class="token punctuation">[</span><span class="token number">1</span><span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
        n <span class="token operator">=</span> bstr<span class="token punctuation">.</span>length<span class="token punctuation">,</span>
        u8arr <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Uint8Array</span><span class="token punctuation">(</span>n<span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token keyword">while</span> <span class="token punctuation">(</span>n<span class="token operator">--</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
		u8arr<span class="token punctuation">[</span>n<span class="token punctuation">]</span> <span class="token operator">=</span> bstr<span class="token punctuation">.</span><span class="token function">charCodeAt</span><span class="token punctuation">(</span>n<span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span>
    <span class="token keyword">return</span> <span class="token keyword">new</span> <span class="token class-name">Blob</span><span class="token punctuation">(</span><span class="token punctuation">[</span>u8arr<span class="token punctuation">]</span><span class="token punctuation">,</span> <span class="token punctuation">{</span> type<span class="token operator">:</span> mime <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre></div><hr> <h2 id="复制文本"><a href="#复制文本" class="header-anchor">#</a> 复制文本</h2> <div class="language-javascript extra-class"><pre class="language-javascript"><code><span class="token keyword">function</span> <span class="token function">copyText</span><span class="token punctuation">(</span><span class="token parameter">str</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">var</span> input <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">createElement</span><span class="token punctuation">(</span><span class="token string">&quot;input&quot;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token keyword">var</span> body <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">querySelector</span><span class="token punctuation">(</span><span class="token string">&quot;body&quot;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    body<span class="token punctuation">.</span><span class="token function">append</span><span class="token punctuation">(</span>input<span class="token punctuation">)</span><span class="token punctuation">;</span>
    input<span class="token punctuation">.</span>value <span class="token operator">=</span> str
    input<span class="token punctuation">.</span><span class="token function">select</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    document<span class="token punctuation">.</span><span class="token function">execCommand</span><span class="token punctuation">(</span><span class="token string">&quot;copy&quot;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    input<span class="token punctuation">.</span><span class="token function">remove</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre></div><hr> <h2 id="转换数字单位k与w"><a href="#转换数字单位k与w" class="header-anchor">#</a> 转换数字单位k与w</h2> <div class="language-javascript extra-class"><pre class="language-javascript"><code><span class="token keyword">function</span> <span class="token function">formatNumber</span><span class="token punctuation">(</span><span class="token parameter">num</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">return</span> num <span class="token operator">&gt;=</span> <span class="token number">1e3</span> <span class="token operator">&amp;&amp;</span> num <span class="token operator">&lt;</span> <span class="token number">1e4</span> <span class="token operator">?</span> <span class="token punctuation">(</span>num <span class="token operator">/</span> <span class="token number">1e3</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">toFixed</span><span class="token punctuation">(</span><span class="token number">1</span><span class="token punctuation">)</span> <span class="token operator">+</span> <span class="token string">'k'</span> <span class="token operator">:</span> num <span class="token operator">&gt;=</span> <span class="token number">1e4</span> <span class="token operator">?</span> <span class="token punctuation">(</span>num <span class="token operator">/</span> <span class="token number">1e4</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">toFixed</span><span class="token punctuation">(</span><span class="token number">1</span><span class="token punctuation">)</span> <span class="token operator">+</span> <span class="token string">'w'</span> <span class="token operator">:</span> num
<span class="token punctuation">}</span>
</code></pre></div><hr> <h2 id="获取地址某参数的值"><a href="#获取地址某参数的值" class="header-anchor">#</a> 获取地址某参数的值</h2> <div class="language-javascript extra-class"><pre class="language-javascript"><code><span class="token keyword">const</span> <span class="token function-variable function">getQueryString</span> <span class="token operator">=</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">name</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">var</span> reg <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">RegExp</span><span class="token punctuation">(</span><span class="token string">&quot;(^|&amp;)&quot;</span> <span class="token operator">+</span> name <span class="token operator">+</span> <span class="token string">&quot;=([^&amp;]*)(&amp;|$)&quot;</span><span class="token punctuation">,</span> <span class="token string">&quot;i&quot;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token keyword">var</span> r <span class="token operator">=</span> window<span class="token punctuation">.</span>location<span class="token punctuation">.</span>search<span class="token punctuation">.</span><span class="token function">substr</span><span class="token punctuation">(</span><span class="token number">1</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">match</span><span class="token punctuation">(</span>reg<span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token keyword">if</span> <span class="token punctuation">(</span>r <span class="token operator">!=</span> <span class="token keyword">null</span><span class="token punctuation">)</span> <span class="token keyword">return</span> <span class="token function">unescape</span><span class="token punctuation">(</span>r<span class="token punctuation">[</span><span class="token number">2</span><span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token keyword">return</span> <span class="token keyword">null</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre></div><hr> <h2 id="匹配简体字"><a href="#匹配简体字" class="header-anchor">#</a> 匹配简体字</h2> <div class="language-javascript extra-class"><pre class="language-javascript"><code><span class="token keyword">const</span> simplifiedChinesePatt <span class="token operator">=</span> <span class="token regex"><span class="token regex-delimiter">/</span><span class="token regex-source language-regex">^[\u4E00-\u9FA5]+$</span><span class="token regex-delimiter">/</span></span><span class="token punctuation">;</span>
</code></pre></div><hr> <h2 id="数组打乱顺序"><a href="#数组打乱顺序" class="header-anchor">#</a> 数组打乱顺序</h2> <div class="language-javascript extra-class"><pre class="language-javascript"><code><span class="token keyword">function</span> <span class="token function">shuffle</span><span class="token punctuation">(</span><span class="token parameter">array</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">var</span> m <span class="token operator">=</span> array<span class="token punctuation">.</span>length<span class="token punctuation">,</span> t<span class="token punctuation">,</span> i<span class="token punctuation">;</span>
    <span class="token keyword">while</span> <span class="token punctuation">(</span>m<span class="token punctuation">)</span> <span class="token punctuation">{</span>
        i <span class="token operator">=</span> Math<span class="token punctuation">.</span><span class="token function">floor</span><span class="token punctuation">(</span>Math<span class="token punctuation">.</span><span class="token function">random</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">*</span> m<span class="token operator">--</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
        t <span class="token operator">=</span> array<span class="token punctuation">[</span>m<span class="token punctuation">]</span><span class="token punctuation">;</span>
        array<span class="token punctuation">[</span>m<span class="token punctuation">]</span> <span class="token operator">=</span> array<span class="token punctuation">[</span>i<span class="token punctuation">]</span><span class="token punctuation">;</span>
        array<span class="token punctuation">[</span>i<span class="token punctuation">]</span> <span class="token operator">=</span> t<span class="token punctuation">;</span>
    <span class="token punctuation">}</span>
    <span class="token keyword">return</span> array<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre></div></div> <footer class="page-edit"><!----> <!----></footer> <!----> </main></div><div class="global-ui"></div></div>
    <script src="/note_blob/assets/js/app.2eeab7c1.js" defer></script><script src="/note_blob/assets/js/2.0b68a382.js" defer></script><script src="/note_blob/assets/js/10.bc0c7728.js" defer></script>
  </body>
</html>
